background image displays through whole site

[exposeclothing]

hi there fellow prestashop users, im having a bit of difficulty with my stores design and was wondering if any of you could possibly assist me. As you can see by my screenshot iv taken of my site, which is on a local server, also being the reason im unable to provide a link – iv added a background image, but it unfortunately is visible through the main contents of the site, which im guessing are transparent, it took me quiet a while to get the exact code to display the background image, but now I need to know where about within my files am I to edit the module backgrounds?

 

In the module .css files there doesn't appear to be anything relating to colour or style, so perhaps its within the global.css? Im hoping someones able to point me in the right direction. Im using the standard template, with a different colour scheme.

 

Edited June 27, 2012 by exposeclothing (see edit history)

[tdr170]

Yes you will need to add a backgroung color into the css files, start by adding background-color:white into the global.css file under the #page heading, be sure there is a semi colon after the line above where you add this.

You will need to add this into any areas where the backgroung still shows through.

Module css files can be found here ..themes/yourtheme/css/modules.

 

If you have trouble give a link to the site and I can tell you where else to add.

[PrestaSupport]

Hi

You can find the css folder in your themefolder e.g: your-theme/css/

Most block background colors is set from file global.css in the css folder i wrote about above.

 

Hope this little info helps

[ciptanegara]

Yes you will need to add a backgroung color into the css files, start by adding background-color:white into the global.css file under the #page heading, be sure there is a semi colon after the line above where you add this.

You will need to add this into any areas where the backgroung still shows through.

Module css files can be found here ..themes/yourtheme/css/modules.

 

If you have trouble give a link to the site and I can tell you where else to add.

 

Sorry for dumb question, how to put background image (not just color) at front office ?

thank you in advance.

 

my website : http://baliprize.com

[tdr170]

You will need to reset the css from ccc under preferences/performance, ccc so I can look at the individual css files.

Explain a little more what you mean by put backgroung image at front office.

 

The background color I told you about should have only changed the center page area to white leaving the grid backgroung everywhere else.

[ciptanegara]

You will need to reset the css from ccc under preferences/performance, ccc so I can look at the individual css files.

Explain a little more what you mean by put backgroung image at front office.

 

The background color I told you about should have only changed the center page area to white leaving the grid backgroung everywhere else.

 

Thanks for the reply.

Im using original CSS now.

I attach the picture, please take a look

 

as seen on the picture, (header part), I ve a abstract background. Can I put that background (of course i have the larger .jpg file) and replace the original background of my theme (black and white new theme).

My original background is just white color with no image at all.

I point my picture with few single arrow, if it is possible to put background over that area??

 

once again, thank you

[tdr170]

I think what you are asking would not really be possible do to the way the css controls the various parts of the page.

As you can see in the image below I have added color in only two places under the body tag I added blue and in the page tag I added red.

You can have a different background image in both places or the same image in both places.

 

background-color: #fff (white) or you can just use red, blue, green with no #

 

background: url(../img/yourimage.jpg) fixed; (upload image to themes/yourtheme/img)

 

With the above if you added backgroung-color to the #page section and background: url to the #body section of the global.css the center of the page would be white and the background would have an image and be fixed in place. (page will scroll background would stay still)

To have the background scroll with page remove the fixed.

 

 

 

 

 

I hope this helps.

[ciptanegara]

I think what you are asking would not really be possible do to the way the css controls the various parts of the page.

As you can see in the image below I have added color in only two places under the body tag I added blue and in the page tag I added red.

You can have a different background image in both places or the same image in both places.

 

background-color: #fff (white) or you can just use red, blue, green with no #

 

background: url(../img/yourimage.jpg) fixed; (upload image to themes/yourtheme/img)

 

With the above if you added backgroung-color to the #page section and background: url to the #body section of the global.css the center of the page would be white and the background would have an image and be fixed in place. (page will scroll background would stay still)

To have the background scroll with page remove the fixed.

 

 

 

 

 

I hope this helps.

 

Thank you tdr170, I ve already add background at my page..(solved)

[exposeclothing]

Thanks so much for the reply tdr170 & prestashop-planet. I added a background colour, but this has added the colour to the whole midsection of the site, covering the background image, instead of only being behind the main features/modules of the store, and leaving the background visible where there are no menus/modules etc.

 

So i figure to change the background behind the "categories, tags, new products, specials, recently viewed etc blocks" i would need to modify the individual css for each module and menu?

 

so i have changed just the categories background for now, and just sampling with colours for time being but now im somewhat confused, as it still displays a transparent border around the background colour-(the area shown with the arrows in the image attached)

 

Also in some of the modules there's nothing relating to the background, so where would the theme be getting the command to display the module

background as transparent?

Edited June 29, 2012 by exposeclothing (see edit history)

[tdr170]

Try this go to your global css and look for this div.block .block_content and you will see a background url remove everthing and add your color (example) background: red ; this will change many different blocks.

Now find this div.exclusive .block_content and do the same this will change other ones like the cart, specials and viewed products.

This will take a little time as once you have color you may need to add some padding at bottom so last item isn't right on the edge.

 

Let me ask you though what browser are you using, I use Google Chrome and like the developer tools with it the best get chrome go to your site click F12, then on the left click the elements tab scroll through the sections till you find the section you want to change highlight it and on the right you will see a list of css files you can change things here and see instant results and know what you need to change and what file it is in. (you will need to have css set as original in BO to see the individual css files)

This will be more help then you know.

[exposeclothing]

Thanks tdr170, worked perfectly, i forgot to thank-you for your help, as i got carried away with designing the website, and then i managed to lose the entire thing when uploading it to a host server, but luckily i had copied the theme template, so all i had to do was re-install the theme on a new prestashop installation on the host server, but once again thanks so much for the support and advice, if this forum wasnt here id still be scratching my head and shifting through the lines and lines of codes lol.

 

Iv been using firefoxes web developer tools, but after what you mentioned, i think i might give googe chrome a try, as the features sound somewhat better than firefox. AND your advice to has CSS set as original in back office to see individual css files, was exactly what i was having problems with in fire-fox as when using the style editor it didnt show the individual files until i set it, so thanks again.