CSS Forum

**LayneMitch** · 03-12-2009, 11:42 AM

Hello.

I'm going to try to lay this out the best way I can because I don't have the site on a domain/server yet. But I wanted the background of the page(s) to be displayed different because it wasn't design standard. First the code looked something like this:

Code:

<html><head><title>...</title>
<style type="text/css">

body{ background-image: url("some url");
         background-repeat: no-repeat;
         background-color: black;
         margin: 0 auto; 
       }

</style></head>
<body>
     whatever....
</body>
</html>

Everything shared the same background I designed in Photoshop, but I wanted to change that because when I resize in IE (Ctrl +), things started to break up.

So that was changed to:

Code:

<html><head><title>...</title>
<style type="text/css">

#bodybackground{ background-image: url("some url");
                          background-repeat: no-repeat;
                          background-color: black;
                          margin: 0 auto; 
                        }

</style></head>
<body>
     <div id="bodybackground">
     whatever....
    </div>
</body>
</html>

The technique worked fine in IE, but now it doesn't display anything in Firefox. So what could be the problem?

**chrishirst** · 03-12-2009, 12:21 PM

It doesn't have a height, so will only be as high as the content. Only IE incorrectly (as usual) treats a background image as content.

**LayneMitch** · 03-13-2009, 02:38 AM

Quote:

Originally Posted by chrishirst

It doesn't have a height, so will only be as high as the content. Only IE incorrectly (as usual) treats a background image as content.

I thought that the height and width of the containing element was already determined by the content..?..

**chrishirst** · 03-13-2009, 04:39 AM

Yep, if it has any.

**LayneMitch** · 11:54 AM

Quote:

Originally Posted by chrishirst

Yep, if it has any.

So in other words you're saying that if I have this:

<div id="backgroundimage">
<div id="contentwrapper">
<p>some text and images<p>
</div>
</div>

The reason the #contentwrapper has an established width and height is because it's wrapped around the actual content, but #backgroundimage is wrapped around the containing block so there needs to be a height set for it..right? And also how is it that the width is already determined?

**chrishirst** · 03-13-2009, 10:27 PM

width on a block element is always 100% of the parent element unless a value is set.

#contentwrapper will be the height of the content inside it
#backgroundimage will be the height of #contentwrapper

if the total height of contentwrapper is NOT more than the height of the background image it will appear to be clipped.