开发者

How to set custom two backgrounds with CSS?

开发者 https://www.devze.com 2023-01-25 19:59 出处:网络
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?

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;

}

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号