Hi,

 

My client wants to have a background image on each page of his site.

 

He also wants the site centered (which is not normally a problem because I use a content holding div with margins set to auto).

 

But when I place a background image on the page (INTERNET EXPLORER ONLY! - works fine in everything else) the holding div is not centered. It's aligned to the left of the browser window!?

 

Any ideas please?

 

Relevant code is:

 

CSS

body {

margin: 0px;

padding: 0;

font-family: Verdana, Arial, Helvetica, sans-serif;

background-color: #000000;

text-align: center;

 

}

#bgimage {

width : 100%;

height : 100%;

left: 0px;

top: 0px;

position: absolute;

z-index: 0;

}

#main {

position : relative;

text-align : center;

width : 900px;

height : 620px;

margin-right : auto;

margin-left : auto;

border: solid 0px 0px 0px 0px #FFFFFF;

padding : 0px 0px 0px 0px;

z-index: 3;

}

 

 

HTML

<body>

<div id= "bgimage">

<img style="width: 100%; height: 100%;" src="blueripples.jpg"/></div>

<div id="main">

<div id="pageid">creative<span class="pid">Vision</span></div>

This is the way i centered a background image behind my content.

 

#bgimage {
position: absolute
width: 100%;
background-image: url(yourimage.jpg);
background-position: top center;
background-repeat: no-repeat;
}

#main {
position: absolute;
left: 50%;
margin-left: -450px;
}

 

Theres also a topic about this here.

 

http://www.webdesignerforum.co.uk/index.php?showtopic=2473

 

Greetz R-J

body {
background: url(blueripples.jpg) no-repeat center center;
text-align: center;
}
#main {
margin: 0 auto;
text-align: left;
}

 

No position attributes needed...

Already had a diffrent background image in the body thats just my website though don't know here

Already had a diffrent background image in the body thats just my website though don't know here

Well, there was nothing in the CSS so I had assumed that wasn't the case, but if I want two images I bung one in html { } and one in body { } - as long as you don't give body { } a background colour both should show through.

Thanks Jem, but this aint working . . . sorry!

 

Any other ideas?

I think the problem is that your trying to get the background img in the HTML

you should just leave the bgimage div empty and then place the image in the background with CSS

 

<div id="bgimage"></div>

#bgimage {
background-image: url(blueripples.jpg);
}

 

Greetz R-J

Thanks Jem, but this aint working . . . sorry!

 

Any other ideas?

Post your amended code..