HTML Help

tyguy87 · Joined: 13 Nov 2009 Posts: 4

My code works perfectly in Firefox and Chrome but it's messed up in Internet Explorer. In IE8, it drops the content down below the background image. Also, it seems like the background image doesn't stretch the way I want it too.

Here is the code:

--------------------------------------

<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
div#container
{
width: 800px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
body
{
text-align: center;
margin: 0;
}
</style>

</head>
<body>
<div id="page-background"><img src="images/bg3.png" width="100%" height="100%"></div>
<div id="container">

-----------------------------------------

I would appreciate your help. Thanks!

sticks464 · Joined: 31 Dec 2006 Posts: 2627

In order to work properly the background image must be set in the body css. IE really has a hard time with 100% height.

This will center and set background in all browsers.
Make sure to use a valid doctype.
Code: <style type="text/css">
* {
margin:0;
padding:0;
}

body {
background:url(img src="images/bg3.png") no-repeat top left fixed;
text-align: center;
}

div#container {
width: 800px;
position: relative;
margin: 0 auto;
text-align: left;
}
</style>

</head>
<body>

<div id="container">

tyguy87 · Joined: 13 Nov 2009 Posts: 4

Hey sticks, thanks for replying and helping me out.

I used your suggested code and everything's all centered properly now, but the image isn't being loaded at all in any of the browsers anymore. I haven't moved it or anything, but I don't know how to tell it where to find the background image.

Do you know how I could correct that?

Thanks again.

sticks464 · Joined: 31 Dec 2006 Posts: 2627

Correct my bad by editing this line
Code: background:url(img src="images/bg3.png") no-repeat top left fixed; to
Code: background:url(images/bg3.png) no-repeat top left fixed;

tyguy87 · Joined: 13 Nov 2009 Posts: 4

Thanks again, sticks. With your code, the background image displays but it doesn't stretch out, which I need it to. I tinkered with it a little and came up with this:

Code: <style type="text/css">
*{
margin:0;
padding:0;
}
body {
background:url(images/bg3.png); width: 100%; height: 100%; position: static;
text-align: center;
}
div#container {
width: 800px;
position: relative;
margin: 0 auto;
text-align: left;
}
</style>
</head>
<body>
<div id="container">

But it's still not quite right. Both Firefox and IE8 do everything right except for stretching out the height of the background image. Instead, it repeats the image below itself.

Here's the website: www.greenimprovementsllc.com/home.html

sticks464 · Joined: 31 Dec 2006 Posts: 2627

You can't stretch a background image with css. It will display as actual size.
To keep it from repeating, add
Code: background:url(images/bg3.png) no-repeat static;

tyguy87 · Joined: 13 Nov 2009 Posts: 4

Well this page works exactly as I want it to in Firefox:

http://www.greenimprovementsllc.com/attic.html

But in IE8 the content displays below the background image. Do you know if there's a way to make IE8 display everything the same way Firefox does?

sticks464 · Joined: 31 Dec 2006 Posts: 2627

With this div containing the background image
Code: <div id="page-background"><img src="images/bg3.png" width="100%" height="100%"></div>
it is on top of all other content.
Try adding z-index:1 to the container div or remove the page-background div and apply the background to the body.