Layout: Background image issue

started by Johnb on Oct 1, 2004 — RSS Feed

Johnb Johnb
Posts: 4

I am trying to develop a layout where the left 50% of my page is one colour and the right 50% is another. I can achieve this ok with 2 divs side by side. What I want is to have an image repeated down the centre of the page - effectively giving a border between the colours.

I have tried using a background image for the body, I have tried having another div with a higher z-index value but cant seem to get the image to appear unless there is some text in the div. The closest I got was to to have a background positioned to the left of my right hand div with a negative margin but the left hand div masks half the image.

Any help appreciated.

Joe Gillespie Joe Gillespie
Posts: 528

It's a bit difficult to visualise this from the description. Is the repeating image in front of or beside the two coloured divs?

Can you not have a third central div for the image either between or on top of the other two divs?

You could also split the image vertically and put half in the left div and half in the right div set to repeat y and appropriately positioned - but the div would have to be a predictable width for you to set the x position.

Johnb Johnb
Posts: 4

I want the repeating image to be in front of the 2 coloured divisions. I think you are right in that spliting the image would work.

I've got it working now with a third central div in front of the other 2 divs. I set the third div to have a width of 15px (the width of the image) and a height of 100% so that it covers the length of the entire page.

Thanks for the help.

You must login to reply