View Full Version : Hopefully Another Simple CSS problem

08-13-2010, 12:40 PM

Take a look at this:


I've got a 3 column website layout (on a dark background) and the above image is the background image which sticks to the top of the center column.

The image is about 650px in width. The problem is I am now making my center column width in %, so it stretches to fill the screen whatever the users screen resolution or browser etc.

So this is the problem - How do I get the above background image to work when the column it's going to be in is not going to be a fixed width?

I'm assuming if it is going to work, I would have to either cut the image in half - to have a left side background and a right side background, or cut the image into 3s - so I have a top image, a left image, and a right image.

But, is it even possible to have the same div with 2 or 3 background images assigned to it on the sylesheet?

This is my center column div in my stylesheet at the moment, with the whole background image as shown above:

#center {
width: 100%;
background: #ffffff url(main-bg.gif) 0 0 no-repeat;

Thanks, James

08-15-2010, 05:22 PM
Split the image up into 4 parts, top, left, right, and middle. Create a div box of 600px, then put 4 divs boxes inside that box. Top, left, right, and middle. Put ur images in that. Make the width of your middle equal to whatever percent you would like to make it equal to. BUT NOTE that when u make it equal to a percent it is NOT the percent of the creen anymore rather it is the percent of the MAIN div box which is 600 px.