CSS - positioning a background image on a fluid layout

Question

Hi

so the layout is like this:

<div style="width: 100%;" class="container">

  <div class="col1" style="width:30%;float:left;">  
   column 1
  </div>

  <div class="col2" style="width:70%;float:left">  
   column 2
  </div>

</div>

I want to make div.col1 a different color, so for this I'm using a vertically repeating background image on div.container. The problem is that this container is fluid and I don't know how to position the image.

I tried something like this, but it doesn't work when you resize the browser window:

.container{background: transparent url(images/bg.png) repeat-y -70% top;

Are there any ways to do this?

Answer 1

I don't know all your requirements, but it will work better if you can set the background-color of .container to what you want your left column to be, and then use the repeated image to fill the right column. The reason being that the background positioning cannot be done from the right, only the left. So something like:

.container{background: #ffffff url(images/bg.png) repeat-y 30% top}

Where the #ffffff represents the left column color, and the bg.png the right column. If you really need the left to be the png, then you will probably need a second wrapper around the floated divs. Something like:

<div style="width: 100%;" class="container">
<div class="inner">
   <div class="col1" style="width:30%;float:left;">  
     column 1
   </div>

   <div class="col2" style="width:70%;float:left">  
     column 2
   </div>
</div>
</div>

Set the inner wrapper (this could just be a solid color rather than a repeated image):

.inner{background: url(images/bgright.png) repeat-y 30% top}

And your container:

.container{background: url(images/bgleft.png) repeat-y left top}

The 30% 'gap' of the inner will allow the left 30% column's background to show through from the container.