3 columns and images

I have a three column layout with the centre column a fixed width and the right and left columns fluid.

I want the right and left columns to display a set of images as a background like a freize. However, I don’t know how to ensure that there is always a full image displayed on the right hand side of the left column ie the edge of the left column that meets the centre fixed column. Is there a way to do this?

The way I’d do it is put an image on your body

body {
background-color: #FFFFFF;
background-image: url(“YOURIMAGEHERE”);
background-repeat: repeat-x;
margin: 0;
padding: 0;

and then put a div in the centre that you can put a border image on

#main {
background-image: url(“YOURIMAGEHERE”);
background-repeat: repeat-y;
border: 0 dotted #0000CC;
height: auto;
margin: 0 auto;
min-height: 500px;
overflow: auto;
padding: 0 100px;
width: 900px;


Yes I can understand that this would work but what I need is a whole series of images. It is a bit difficult to explain but basicly I would have…

  1. a centered div 900 px wide which has a collage made up of a series of images fitted together. This is the easy part
  2. A right hand div which has a fluid width and also had a background made up of a series of images. Again this is possible.
  3. A left hand div which is also fluid and with a background made up of a series of images. However the problem is ensuring that the images which are located on the right hand side of this div ie next to the left edge of the centred div, show in their entirety and are not cropped. I also don’t want any blank spaces. This is the bit I am having trouble with.

Is the “background made up of a series of images” a single composite image applied as a background property to the column? If so, it may simply be a case of setting the position of the background image to right. e.g.

#column-1 {background:url(path/to/image.jpg) right top [repeat value]}

A link or some HTML/CSS code would be helpful.

Not 100% sure this is what you’re looking for, but do you need a min-width property?

#yourid {
   min-width: 980px;

The background is made up of a series of images. However I can’t see how I would be able to ensure that the images started to tile from the left, so I think what I might need to do is to take several images and combine them into the one image and then set this as the background.