Background image not wanted in middle section

[mattsp]

Hi,

I'm new to PrestaShop and in the process of putting a site together. I'm trying to set a background for the page, but want to have the 'middle bit' in white.

So have set the background image within the body within the global.css as follows:

background-image: url('../img/pagina.jpg');

But the middle section is transparant, so it's showing through there too when I would like it to be white.

Here's a screen shot so you can see what I mean:
http://img695.imageshack.us/img695/2148/50003315.jpg

So that middle section, and where the text is should be on a white background, not feeding through the background image.

I've been struggling to figure out how to do it, it's probably something simple but any help from anyone would be gratefully received!

Many Thanks
Matt

[rocky]

I think you just need to set the background of the #page section in global.css to white.

[mattsp]

Thanks so much for your help, so simple in the end! It worked...

It's probably something similar, but if I wanted the transparancy to come through the top header section, by that I mean the background to come through at the top how would I do that?

Here's what I mean:

http://img213.imageshack.us/img213/3742/topka.jpg

Many Thanks

[rocky]

That would be more difficult. You'd need to take off the white background from the #page element and add it to the #left_column, #center_column, #right_column and #footer elements. You may need to adjust the padding of these elements, since the padding of the #page element will become transparent.

[mattsp]

Hi, thanks once again for your help...

I have set the left/center/right sections to background white and it's doing what I want to a certain extent. However, part of the center is still showing as transparant.

How would I go about setting this part of the page to a white background too?

Here's what I mean:

http://img519.imageshack.us/img519/74/linesc.jpg

Also, is it possible to add a left/right border to the left and right parts of the page as indicated above? And how's best to do that?

Any help greatefully received.

Many Thanks

[rocky]

Sorry, it is difficult to do with your website design. You need to make sure the center_column is the same height as the right_column, but since the columns are of variable height, it is difficult to do. Perhaps it would be easier for you to go back to the old #page background design and then just give the #header the same background as the body tag. The only problem is that the background may not line up.

[mattsp]

Hi again,
Thanks for your help. I think rather than make the header background transparant which seems tricky to do, I'd like to add a small margin above the page header section. It doesnt need to be the background (can be a solid color), but just wondering how to go about doing that. It seems so simple but am struggling so any pointers would be gratefully received.

I've taken a screen shot of what currently have, and mocked up what I'm trying to get to:

http://img30.imageshack.us/img30/6259/lalaass.jpg

Thanks

[rocky]

There are two things you could do. You could add a margin-top: 40px; to the #page element in global.css, or you could add a border-top: 40px solid #d9dee1; to the body element. The former will mean the background will start from the top of the page and the latter means the background will start from 40px from the bottom of the page, and the top 40px will just be a solid colour.

[mattsp]

Hi,

Wondering if anyone can suggest how I can get rid of the gap between the main body of the page and the footer (variouslinks) and the menu at the top?

I've made the #page transparant as I wanted to have the top logo on the background but wondering how I can get rid of the gaps shown below or have these 2 gaps in white.

http://img215.imageshack.us/img215/5205/96154118.jpg

Any pointers gratefully received.

Thanks.

[mattsp]

Hi,

I wondered if anyone had any ideas on this. I was able to remove the gap from the top, but can't see how to remove it from the bottom part of the screen (see screen shot).

I want to close the gap, so that the footer part of the page fits snugly under the main part (so lose the gap and transparant background so it's all white).

Many thanks in advance for any suggestions.