CSS background image only displays with content

[baseballfury]

Hi all,

An issue i've never come across before. I've got a picture as a background which i declare in my css file. The div (wrapper) is 960px wide and 100px height, the image is to sit at the top left so no real placement needed.
I then have another div (container) inside the wrapper thats 700px wide with the content in it. The background image of wrapper will not display unless i put some content in the wrapper div (i have padding-top:100px to push container down so it's not that).
I can't put any content e.g. <p></p> in wrapper because it pushes everything down by 20px and makes the layout look....not bad....just not how i want it.
It's no doubt something obvious i have to declare in my wrapper div but your help as always is much appreciated.

Tom.

[Lusiphur]

A quick note to this scenario.

If you're looking for a dynamically positioned background (floating horizontally based on browser width) you will never be able to achieve background extension beyond the bottom of the page content.

The only way to force a DIV to expand to a set length is to use absolute positioning which eliminates the left/right margin float or to extend the content to force the DIV to extend with it.

I was looking into a lot of resources to try to solve an identical problem to this and there is currently no way that I've found of fixing a DIV height without absolute positioning.

[macneato]

Hi,

Could i see your code? But what im getting from you is, something along these lines:

<div class="wrapper">
 <div class="container"></div>
</div>

Yet your wrapper is only 100px in height. then you have padding on the container to push it 100px down. Why? Whats the point of having container nested in wrapper then? if you dont mind me asking.

[macgurl70]

It reads like you want the image to be the actual background for the page - if that is the case, why not just set it as the background?

body {
   background-image: url(my_background.jpg);
   background-repeat: no-repeat;
   background-position: top left;
   margin:none;
   background-attachment:fixed;
  }

I am sure there is much cleaner code that could be used, this is just off the top of my head.

Or, if you are doing something like a header and want the extra space around the text why not just use padding to keep the text where you want it? This way you have content in the div and the background shows up.

[JameB]

This can easily be fixed by setting the width and height to that of the picture.