Forum Moderators: not2easy
My client wants a background image on each page of his site.
He also wants the content centred. Not usually a problem with margins set to auto for the holding tag.
But with the background image the content is not centering - it's jumping to the left of the browser window - in Internet Explorer only.
Any ideas how to solve this 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">This is the content holder which I want to center</div>
</body>
Other than that, I assume you put the text-align:center to try to center the div for IE6 right? well you need to do the text-align fix for the PARENT element, so the body.
If you put in a proper doctype, I don't think you should need to do that though
Also, just so you standardize things better, you may want to consider moving the img style="" content into the css by using this selector : #bgimage img{put styles here}, but I guess you probably know that.
You might find it easier to put the page's background image in the <body> tag of each page:
<body style="background: #FFF url(your_image.gif) left top no-repeat;">
I know this does not centralize the CSS, but it strike me you have to go into each page anyway to insert the image in the <div>
Marshall
