3

I'm new to stack overflow, but I've been working with CSS for about a year and a half now.

I can't seem to get the background property to work at all for my div class="content". Ultimately I just want to put a background image on the div using background-image: url('home_bg.png');.

I've Googled the issue and looked it up on stack overflow, but the issues I've found thus far haven't helped. I keep all of my background images in the same folder as my CSS, and I've double-triple checked my file names are correct. I know that the div is being targeted correctly in the CSS because the other properties such as width and margin are working correctly.

I even tried putting an ugly background color on it just to see if it would work. It didn't. I'm sure there's probably just something minor, but I can't find it.

The HTML:

<body>
 <div class="navbar"> ... </div>
 <div class="content">
  <div class="box" id="twitter"> ... </div>
  ...
  ...
 </div>
 <div class="footer> ... </div>
<body>

The CSS:

body {
  background-color: #000;
  background-repeat: repeat;
  margin: 0px;
  padding: 0px;}
div.content {
  background-image: url("home_bg.png");
  margin: 0 auto;
  position: relative;
  top: 84px;
  width: 1024px;}

The page is located here if that helps too.

Thanks in advance! ~Tatianna~

1
  • All your div are float, so your content has no height
    – Michael B.
    Nov 4, 2011 at 0:59

3 Answers 3

2

It's your content div. It has no specified height and it's conent elements are "out of flow" (being floated or position:absolute). This effectively produces a content div of 0px height. To the difference you can add this style rule:

html, body, .content {height:100%;}

not a solution but a start.

1
  • Of course it was the one thing I didn't try. Thank you very much!
    – TatiannaWS
    Nov 4, 2011 at 1:06
2

The behavior you're seeing is that div.content has no height because the contained elements are all floated. There are many ways to fix this issue. The quickest fix is to add a parent element for centering (margin:auto) and float div.content. A floated element will take on the height of it's nested elements. You can also apply overflow:hidden to div.content, but you'll need to tweak your layout and css a bit for that to work.

1

This has something to do with you making it relative. If I change the position property to "fixed" or set the height to "500px" your background shows up. If/when I can understand why this is occurring, I'll let you know.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.