How to set one background till half of the page and another background from half of the page till the end, while content div remains in exac开发者_如何学Pythont middle of the page? Please add an example!
<body><div id="right"><div id="content"></div></div></div>
css
body{ background:url("../a.gif") repeat-x scroll left top transparent;height:632px;}
right{background:url("../r.jpg") repeat-x scroll right top transparent;margin-left:50%;width:100%;}
content{width:980px;}
Problem - backgrounds is placed ok, but content div isn't in the middle of the page ....
ANY SOLUTIONS?
without css3:
html
{
background: url(...) x y repeat;//x and y for wherever it needs to start, repeat can be any value, up to you.
}
body
{
background-image: url(...) top left repeat-x; // or no-repeat if you only want it once
}
With css3:
html{
background: url(http://placehold.it/50x50) top left no-repeat,
url(http://placehold.it/50x50) top right no-repeat;
}
http://jsfiddle.net/jfkqd/
Center horizontally with
.content{
margin:0 auto;
width:200px;
height:200px;
}
(needs a text-align:center;
to work in ie)
To center horizontally and vertically:
.content{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
精彩评论