Adding images to additional side bars

Evening All! I've added two "extra" side bars and named then navColumnThree and Four (copying the existing 1 and 2 code in a custom stylesheet. What i want to do is set a background image for these two blank side bars.

https://Www.jambaroo.co.uk

I then want the header to sit between the two new sidebars (so they go all the way from the top to the bottom of the screen.)

This is an example - i want something like the two green cloud sidebars:- http://www.fabulouskids.co.uk/

I've tried adding {background-image:'logo.gif'} to the #navcolumnthree and #navcolumnthreewrapper as well as .rightcontent (although that would background image both the right hand bars??) but I can't get an image to appear at all? I've also tried adding the full URL for the image.

Any ideas?

Thanks!:flex:

I've tried adding {background-image:'logo.gif'}
Wrong form- - should be like

background-image: url(../images/header_bg.jpg);

You're working way too hard for this - all you need is to put the image as a background for the body {} rule. Let it repeat and it will cover all space outside the #mainWrapper area.
There could be a few ways of detailing it depending on exactly how you want the side images to work.

I tried adding the background image to the whole body tag in the CSS but that didn't work either. It seems to flash behind the body when I load it though. I remove the side bar background colours but still don't see it?

Thanks

I remove the side bar background colours but still don't see it?
Make the color "transparent"

Added background-color:transparent to the body and to the individual #NavColumns. Still doesn't work.

I'll have a better look at it tonight and i'll copy the code I have but if anyone else has any more ideas in the mean time?!

Added background-color:transparent to the body and to the individual #NavColumns. Still doesn't work.
Has to work....
It is like layers, so maybe you still have elements with color

Hmm - i thought i would try replacing all the colours with transparent. Then adding the colours back in. I've managed to get what I want, except that i can't get a background colour to show in the central content except if i amend the mainWrapper... in which case i lose the background image on the extra side bars too.

Any idea how I split the new second side bars i've created from the middle content?!

Thanks for all your help!

Actually - i presume i need to do something to take the the third and fourth sidebars i've created outside of the MainWrapper in tpl_main_page? This might help with my problem whereby the content which should be in the nav sidebar on the right, appears in the one far right which i want as an image background....

All i did to create the additional sidebars was to copy the existing sidebar code... i.e.

and the same with the right! If i define them outside of the MainWrapper i presume I'm going to need to define some other wrapper to contain them?

Sorry - all new to this one :)

Get rid of the extra sidebars - you don't need them and they just complicate things.

Instead, find this in your stylesheet#contentMainWrapper {background-color: transparent;}and change to this```
#contentMainWrapper {background: white; width: auto; margin: 0 150px;}

There may be another element or so to change after this is done, but it should take care of most of the background.

Ahah - works like a dream.. thanks! The next issue is that the content wrapper seems to be different on product pages than on the home? So it looks lovely, but then I click on a product and the center column is not as wide.

Any ideas what that wrapper is called?

Thanks

Your "Manufacturer Logo" image is 192x192px, which is wider than the 150px column it is in. This causes the misalignment.

Hmmn - amended the image to one smaller than 150*150.... and it is improved but still misalligned.

I'll keep on trying various things :) I'll get it eventually!

The leftovers of "trying various things" are the root of your problem. You still have #mainWrapper at 100% width, even though you are not stretching out the header to fill it any more. Various elements have 150px side margins, and width: auto; set on elements that usually have no stylesheet width settings.

If you want a 150px constant side border of grass, with the content stretching to fill the rest of the window, remove the width from #mainWrapper (letting it automatically use what is available) and give it 150px side margins.
Then remove the side margins from most of the other elements that still have them, and remove the width: auto; from #contentMainWrapper. This is the principal culprit in the persistent width restriction there.

Also, you made the mfr logo 147px, but the sideboxes have a .4em (about 5px for you) padding on each side, so the images in them need to be maximum about 140px wide.