How to set custom two backgrounds with CSS?
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;
}
加载中,请稍侯......
精彩评论