I've got a website with a header div that has a different background image than the main div, which is x-repeated. To center the webpage, I have some CSS for the body as follows:

body {
width:960px;
margin:0 auto;
}

When I have this, though, the background images only repeat for only the 960px wide body. Is there a way to have a centered webpage with div background images that repeat-x for 100% of the browser window?

Thanks

3 answers

2
points

Restrict a container element to 960px rather than the document body itself.

Answered over 6 years ago by Nathan Duran
  • When I restrict the container elements to 960px, the background image doesn't repeat for more than 960px. Rodney Keeling over 6 years ago
  • Then you're doing it wrong. Nathan Duran over 6 years ago
2
points

Both stated answers solve your problem. I almost always use centered content. shortly it looks like this:

<html>
 <head>
  <title>foo</title>
<style type="text/css">
 body
{
  text-align:center; /* IMPORTANT -- Needed for IE to center the main div */
 background-image:url('your_image_to_be_repeated.jpg');
background-repeat: repeat-x;
background-position: top left;
}
#main
{
 width:960px;
 margin:0 auto;
}
</style>
 </head>
<body>
 <div id="main">
 <!-- all your other website elements go here -->
</div>
</body>
</html>

Good luck!

Answered over 6 years ago by Menno Geelen
  • You'll need `#main { text-align: left; }` to counteract the `text-align:center` on body. Justin Hileman over 6 years ago
  • Damn justin, you are totally right, i totally overlooked that one. Menno Geelen over 6 years ago
1
point

Put the background image on html, or body elements, or both and have a container element that is centered and width constrained.

Answered over 6 years ago by Tony Crockford