How to make CSS - angles-image + background? And height - 100% or auto?
I have already made CSS a lot of times, but did not work and a lot of glitches ...
I will show picture - glitch: See picture - http://beta.areku-developstudio.org.ua/new.pngSee picture (this is necessary, as better quality):
See picture2 - http://beta.areku-developstudio.org.ua/new2.pngHow to make CSS - angles-image + background? And height - 100% or auto?
Sample HTML:<div id="conteiner" class="main">
<div class="top_left_corner">
<div class="top_right_corner">
<div class="bottom_left_corner">
<div class="bottom_right_corner">
<div id="content">
<br/><br/>
开发者_如何学运维 Hello Areku<br/>
Hello Areku<br/>
</div>
<br/><br/>
</div>
</div>
</div>
</div>
</div>
Choose other ways to make CSS + HTML. Can jQuery? I am waiting for an answer ...
Sincerely, Areku!You could do that with some creative uses of the background property on your various elements:
<html>
<body>
<div id="content">
Your content
</div>
<div class="corner right"></div>
<div class="corner left"></div>
</body>
</html>
Then the CSS would be as follows:
/* Following 2 rules create min-height 100% for your content and body */
html,
body {
height: 100%;
}
#content {
min-height: 100%;
}
/* html and body create the fixed position bottom right/left corners */
html {
background: url(bottom-right.png) no-repeat fixed 100% 0;
}
body {
background: url(bottom-left.png) no-repeat fixed 0 0;
}
/* top right/left corners are handled by 2 divs */
.corner {
position: fixed;
top: 0;
width: 50px; /* width of your background image corner */
height: 50px; /* height of your background image corner */
}
.left {
left: 0;
background: url(top-left.png) no-repeat 100% 0;
}
.right {
right: 0;
background: url(top-right.png) no-repeat 100% 0;
}
加载中,请稍侯......
精彩评论