Background repeat only on one side of the site lay

Question

How can I repeat endlessly a background color/image only on one side of my site layout and keep the content centered?

The best method seems to be with tables as it will work even in IE6, however is there a method to do this without tables and javascript and be working in at least IE7+?

The method with divs/display:table does not work in IE at all,

<style type="text/css">

*{
margin:0;
padding:0;
}

/* table method */

.table-container{
margin-top:20px;
border:0;
border-collapse:collapse;
width:100%;
height:100px;
}

.table-container .left{
background:transparent;
}

.table-container .center{
width:960px;
background:#ddd;
vertical-align:top;
}

.table-container .center div{
margin:0 auto;
width:960px;
}

.table-container .right{
width:auto;
background:#ccc;
}

/* div method */

.div-container{
display:table;
margin-top:20px;
border:0;
width:100%;
height:100px;
}

.div-container .left{
display:table-cell;
background:transparent;
}

.div-container .center{
display:table-cell;
width:960px;
margin:0 auto;
background:#ddd;
vertical-align:top;
}

.div-container .right{
display:table-cell;
width:auto;
background:#ccc;
}

</style>


<table class="table-container">
<tr>
<td class="left">&nbsp;</td>
<td class="center"><div>Table method : This space must be centered</div></td>
<td class="right">&nbsp;</td>
</tr>
</table>

<div class="div-container">
<div class="left">&nbsp;</div>
<div class="center">Div method : This space must be centered</div>
<div class="right">&nbsp;</div>
</div>

Answer 1

Here is a more current approach (old answer was from June 2011). All major browsers now support multiple background images.

With multiple background images and css calculations, you can repeat-y on just the side that you want. So, here is what you can do:

.full-width-container{
  background-image:
    url('some_long_image_600Wx100H.jpg'),
    url('some_long_image_600Wx100H.jpg');
  background-position:
    calc(50% + (600px * 0.5)) 0;
    calc(50% + (600px * 1.5)) 0,
    ;
  background-repeat: repeat-y;
}

Note: The 600px is the width of the image. The above example would cover a screen with of 1200px, or the left half of a 2400px wide monitor.

Ideally, you have a image that is is fairly wide, so you don't have to have so many reused background images. If you had an image that was only 300px wide it would look like this.

.full-width-container{
  background-image:
    url('some_long_image_300Wx100H.jpg'),
    url('some_long_image_300Wx100H.jpg'),
    url('some_long_image_300Wx100H.jpg'),
    url('some_long_image_300Wx100H.jpg');
  background-position:
    calc(50% + (600px * 0.5)) 0;
    calc(50% + (600px * 1.5)) 0,
    calc(50% + (600px * 2.5)) 0,
    calc(50% + (600px * 3.5)) 0,
    ;
  background-repeat: repeat-y;
}

I'm also not sure how loads of multiple bgs, even with the same image would impact your frame rates. I'd imagine it would be minimal.

Answer 2

You can achieve cool effects like half screen background colours by using position absolute. And there are easier ways to center text than using the display: table layout - which I have also shown in my CSS.

Here is a working examnple on JSFiddle and I have done my best to explain the CSS in comments below.

Here is the code:

CSS

.content {
    margin: auto;         //use these to center the content
    position: relative:   //position relative, so the absolute div is positioned relative to this div
    text-align: center;   //use these to center the content
    width: 60%;
}

.content p {
    position: relative;   //position relative so we can set a z-index
    z-index: 1;           //z-index is higher than that of the background so it appears above  
}

.background {
    background-color: #777;
    height: 100%;
    left:0;               //we want the left of the div to be 0px from the left of its container div
    position: absolute;   //position absolute, so we can put it anywhere we want
    top: 0;               //we want the top of the div to be 0px from the top of the container div
    width: 50%;
    z-index: 0;           //we want the z-index to be lower than the text
}

HTML

<div class="content">
    <p>...text...</p>
    <div class="background"></div>
</div>

Enjoy