[SOLVED] PICTURE BACKGROUND OR COLORED SIDE MARGIN with center and side panels white background

[enlaceptolosa]

Hi,

 

Last night I had the following issue:

 

I have installed Advanced Background Module and upload a HD background. The problem was, when different clients access the Prestashop Front End from diferent device and PC with different screen resolution, the background whas descentered and all where messed up, and You can see the background image between the HOOKS (central panel, side panels, menu bar, etc).

 

The solution that I find to fix that up:

 

1. In the module Advanced Background, upload the picture and mark the picture option Java Script (Not CSS or FIXED). This is to adjust the image to all screen resolutions. But...

 

We still have the problem that the picture it showned between the hooks and text and picture can see corectlly.  THE SOLUTION IS TO INSERT A WHITE BACKGROUND IN THE CENTRAL AND SIDE HOOKS, AND LET THE SIDES FREE TO CHARGE THE MAIN BACKGROUND OR OTHER COLOR BACKGROUND.

 

2. Go to your CSS folder under -Themes-> Your Theme Name -> CSS and edit the following 3 files:

 

-product_list.css  The firsts line insert {background:#fff} as the example above . We do this to eliminate spaces between hooks and set background white in the items list under categories

 

ul#product_list {

list-style-type: none

background:#fff

}

 

-product.css  The firsts line insert {background:#fff} as the example above . We do this to eliminate spaces between hooks and set background white in the items description page

 

#primary_block {

margin-top:15px;

background:#fff

}

 

-global.css   At lline 41 insert {background:#fff} as the example above . We do this to eliminate spaces between hooks and set background white in the main categories pages

 

* ************************************************************************************************

struture

************************************************************************************************ */

#page {background:#fff}

#header {z-index:10}

#columns {z-index:1}

#left_column {}

#center_column {}

#right_column {}

#footer {}

 

 

 

And that is it.

 

Hope it make your life easier, because i have been searching for a solution all night.

Regards.

Edited September 25, 2013 by enlaceptolosa (see edit history)

[enlaceptolosa]

at my webpage you can see the result .  http://viste-diferente.es

[enlaceptolosa]

a stupid question.. How can I mark this post as SOLVED??

[vekia]

here it is, simple instruction:

 

 

[sOLVED] Topic
If, after posting a topic, you find a solution to your problem, please indicate it in your post and describe the solution.
Furthermore if you are the author of the topic for which a solution has been found, please edit your topic title to mark it as [sOLVED].

To mark a topic as [solved] :
- Edit the first post of your topic by clicking on the "Edit" button,
- Click on the "Use full editor" button,
- Add the "[solved]" string at the beginning of your topic title and click on the "Submit Modified Post" button.