I have an image that is 720*7px (is is lightgreen with a 3px white border on both sides) that I want to repeat vertically as a background in the content div, but the damn image wont display!

 

Whats wrong?

 

HTML:

<div id="content">
 <div id="content_left"></div>
 <div id="content_right"></div>
</div>

 

CSS:

#content {
width: 720px;
background: url(../_images/content_bg.gif) repeat-y;

}

#content_left {
float: left;
background: #DDE9C4;
width: 210px;
text-align: center;
line-height: 2em;
padding-right: 15px;
padding-left: 15px;
display: inline;
padding-top: 10px;
padding-bottom: 10px;
border-right: 2px solid #FFF;
margin-top: 10px;
min-height: 400px;
}
#content_right {
background: #DDE9C4;
width: 450px;
float: right;
margin-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}

You've not set a height attribute, and theirs no content to create any height? could that be it? or have your stripped down the code for us?

Yes, I stripped it down. So it has height.

 

I tried removing the background-colors in content_left and right, maybe they where overlapping the background image, but no go=(

I think it might be because your applying it to the container div, i've only just noticed that... my bad. I think anyway.

I think it might be because your applying it to the container div, i've only just noticed that... my bad. I think anyway.

applying what to the container div? It looks like this:

 

#container {
background: #dde9c4;
width: 720px;
margin: 0 auto;
text-align: left;
}

I get this problem a lot when I use floats and have an image in the background of their container, as the container doesn't follow the height set by the floated divs.

 

If you are going to have something under the two floats before the container ends then this will fix the problem as in that you could add the clear function within its css,

 

 

If you are not having anything else within these you could cheat a little and use something like this:

 

#content br { clear:both}

 

 

<div id="content">
<div id="content_left"></div>
<div id="content_right"></div>
<br />
</div>

In your original it has

 

#content

background: url(../_images/content_bg.gif) repeat-y;

What dizi suggested should work in most cases, and most likely will.

 

In your original it has

 

#content

background: url(../_images/content_bg.gif) repeat-y;

 

And #content contains #content-left and #content-right to it's a container/wrap etc.

 

You can wrap containers within containers etc. hence why people use variations like #wrap #container #content_wrap and so on.

 

You never posted #container so i was referring to the #content div which is a container, despite it not being called container

 

Hope that clears that up for future reference?

Bingo, it worked! Thanks Dizi