CODEWITHSUNDEEP
cssbackground-image
user513991
user513991

Reputation: 11

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 exact 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?

Upvotes: 0

Views: 959

Answers (2)

Gregg B
Gregg B

Reputation: 13757

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;

}

Upvotes: 1

zzzzBov
zzzzBov

Reputation: 179284

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
}

Upvotes: 1

Related Questions