Extending Background Past Container Div?

HTML & CSS
1

Hey folks,

I recently ran into a slight issue, and I’m not quite sure if it’s just a dumb little mistake or not.

Basically, I want my footer and header background images to repeat-x so they show for the entire width of the browser, however since they are in my container div of 960px width, they only go that far.

Is there a way around this?

One example of a site with this is Nettuts (http://net.tutsplus.com/), however they only have what I want to do on the header. I’m looking to get the same concept for both the header and footer.

Thanks a ton,

Elementax

2

If you’d like a style like on Nettuts, then you’d need to split your content into parts and not contain it within a fixed width.

Instead you’d create a second div that’s as wide as the viewport (100% width) and then add another div that holds the actual width you want to have for your content.

You could do something like:

#header {
  width:100%;
  background:url(header.png) repeat-x;
  overflow:hidden; /* contain floats, if you use any, otherwise remove this */
}

#footer {
  width:100%;
  background:url(footer.png) repeat-x;
  overflow:hidden; /* ref. above */
}

.inner {
  width:80%;
  margin:auto;
}

#content {
  width:80%;
  margin:auto;
}



<div id="header">
  <div class="inner">my content</div>
</div>

<div id="content">main content</div>

<div id="footer">
  <div class="inner">my content</div>
</div>
3

Kohoutek is on the money with his suggestion, though if you are using a solid background for the area around your content, you can skip the wrapper at the top and apply that image to BODY… be one less element.

I’d also condense like properties in the CSS – no reason to say things twice… and I’d move float wrapping to .inner since it’s more likely to need it than the outer wrapper…


#header,
#footer {
  width:100%;
  background:url(header.png) repeat-x;
}

#footer {
  background:url(footer.png) repeat-x;
}

.inner {
  overflow:hidden; /* contain floats, if you use any, otherwise remove this */
  width:80%;
  margin:0 auto;
}
4

Thanks both of you, I seem to have found a solution based off your suggestions :wink:

Elementax