How to change background?

[colorrush]

Hi,

 

How can I change the background of my shop?

 

I'm using v1.5.1.0

 

Thanks in advance

[Gil Mobile Online]

In your theme folder (default), you will find the css folder. There, open global.css

 

You can change the body to look like this in order to have the link to your image stored in the root folder or wherever you want

 

 

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background:url(../img/background_custom.jpg) no-repeat;

background-color:#fff

 

}

 

Hope it helps

[vekia]

you must edit your prestashop theme global.css file

[Gil Mobile Online]

a nice tutorial here

[vekia]

a nice tutorial here

 

nice tut I recommend to all!

[makoba]

Hi guys,

 

If you have tested this succesfully, you will no the right size the image should be in.

Please let me know the dimensions in pixels to creat & experiment with my back ground

[vekia]

hey, dimensions probably depend on the screen resolution / sizes etc.

[papek]

Dont know and makes me crazy coz it just wont and wont work for me. Made copy paste of code and changed name so it coincides with my photo file name. All i get is this stupid questionnaire sign on top left corner. Tried to change path, etc. When i inspect page with firebug it says

(body {

 

 

background-color:#FFFFFF;

background-image:url(http://www.milkandhoneytrade.com/themes/default/milkandhoneytrade.com/img/bg01.jpg); WHY DOUBLE PATH SHOWING THERE

background-position:initial initial;

background-repeat:no-repeat no-repeat;

color:#222222;

font-family:Arial, Verdana, sans-serif;)

 

 

AND if i change line with firebug to wright directory path i get good background but as we know firebug for chrome shows us temporary changes and i need permanent one.

 

Alo i am using subdomains for a css and js to speed up page loading

 

any help? i am going to apreciate it big time

[Paulito]

Good morning,

 

This may seem an odd way to add a background image to your website but I find it the quickest/easiest way to do it and will only take 3 or 4 minutes.

 

First, make sure you have the image you require on your pc and you know where to find it, then go to:

 

Back office > Catalog > Products > add new > call your product - background image > click Save and Stay > go to your

 

short description box and click insert/edit image > a box will appear > to the right of image url you will see a small box

 

(browse) click this box > another box will appear click upload in the top right corner > another box will appear, click choose file >

 

find the image on your pc > click upload and then click close > click the box to the left of the image and then click select > and

 

another box will appear > copy the url and paste in global.css > click Save

 

Problem solved

 

Here is what mine looks like, I have 5 images, I change them when the mood takes me.

 

background-image: url("http://gadgetskunk.co.uk/img/cms/[email protected]"); ("http://gadgetskunk.co.uk/img/cms/grey.jpg") ("http://gadgetskunk.co.uk/img/cms/[email protected]") ("http://gadgetskunk.co.uk/img/cms/[email protected]") ("http://gadgetskunk.co.uk/img/cms/brickwall.png")

 

PS. remember to disable the product you made earlier

 

PPS. I can't see any quotes " " in your image URL

[vekia]

can you show the code please?

[papek]

many thanks goes to mr. perfumeskunk despite it didnt solve my problem, quotes or no quotes or, i feel pitty myself i dont know English word for half quotes, you know what i am saying while, etc.

 

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

generic style

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

body{

background:url("http://www.milkandhoneytrade.com/img/cms/011%20(3).jpg") no-repeat;

font:normal 11px Arial, Verdana, sans-serif;

color:#222;

background:#fff

}

body.content_only {

background: #FFF;

}

 

code you asked for vekia + screenshoot coz i think is important

 

PS if code pulls out this problem is not solved

 

body{

background:url("../milkandhoneytrade.com/img/bg01.jpg") no-repeat;

font:normal 11px Arial, Verdana, sans-serif;

color:#222;

background:#fff

}

body.content_only {

background: #FFF;

 

 

i am stubborn kid but, but just can not figure it out alone

[vekia]

you've got CCC mode

i think that for the first you should turn it off under the advanced preferences > performance tab in your back office.

moreover, when you're working on your template files - turn force compilation on (the same tab)

and turn cache off (the same tab)

[papek]

you've got CCC mode

i think that for the first you should turn it off under the advanced preferences > performance tab in your back office.

moreover, when you're working on your template files - turn force compilation on (the same tab)

and turn cache off (the same tab)

 

k sir. Done. Problem, well it is not too much of a problem i just have opinion that i want-wish-need backgound image, latter on i am going to strech it with css code or something but first thing first, need to incorporate it somwhere somehow

 

code brings us here:

 

body{

background:url('http://www.milkandhoneytrade.com/img/cms/011%20(3).jpg') no-repeat;

font:normal 11px Arial, Verdana, sans-serif;

color:#222;

background:#fff

}

body.content_only {

background: #FFF;

}

 

i have tried thousands combinations, regarding path, code line order where there should not makeing a problem(s) but i am inside never ending loop :-/

Edited July 21, 2013 by papek (see edit history)

[vekia]

now you've got:

 

background:#fff url('http://www.milkandhoneytrade.com/img/cms/011%20(3).jpg') no-repeat;

font:normal 11px Arial, Verdana, sans-serif;

color:#222;

background:#fff

 

 

what does it mean?

background:#fff; "override" the background:url('');

 

use this:

background:#fff url('http://www.milkandhoneytrade.com/img/cms/011%20(3).jpg') no-repeat;

 

instead two separate background values

[papek]

<p>no luck, i am looking forward, will be glad to pay beer or two, coffe and ice cream to someone who solves this mistery on my page via paypal, it is not too much, no luck</p>

<p> </p>

<div>body{</div>

<div>font:normal 11px Arial, Verdana, sans-serif;</div>

<div>background:#fff url('http://www.milkandhoneytrade.com/img/cms/bg01.jpg') no-repeat;</div>

<div>}</div>

<div>body.content_only {</div>

<div>background: #FFF;</div>

<div>}</div>

 

[vekia]

if it iis possible - please give me access to your ftp, i will do it for free

just send me PM with credentials if you want

[studio52]

Wow, seems like there is a lot to learn to be able to make changes to the theme..I am still a noob, so bear with my posts...TY

[vekia]

Wow, seems like there is a lot to learn to be able to make changes to the theme..I am still a noob, so bear with my posts...TY

 

no worries

we are here to help you to configure and change your prestashop store

so if you've got any other question - just create own threads, enjoy the power of the community !

[studio52]

Thanks very much...Im sure soon I will be seeking info and how to's...looks like a very good forum..

[papek]

if it iis possible - please give me access to your ftp, i will do it for free

just send me PM with credentials if you want

There is no need for coz first from the start CDN cache was in a way blocking all of my changes to be seen in realtime. Problem solved. Now i have to figure out how to stretch background image to cover whole page. Already try and found some CSS code but none seems to satisfy me.

[vekia]

hello

thanks for information that problem is solved

i suggest you to create new thread related to stretching backgrund to cover whole page.
can you show also examples of bg that you like?

[HansDulpers]

I also seem to fail to make it work. I used Paulito's way. This is my code:

 

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

generic style

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

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background-image: url(http://kempenvt.roccloud.nl/prestashop/img/cms/1363084_86726523.jpg);

 

}

body.content_only {

background: #FFF;

}

 

 

Nevermind. It's working now.

Edited November 13, 2013 by HansDulpers (see edit history)

[ricky11]

How would you change the background image for a specific page only?

 

Moreover, would it be possible to reuse a slider module in the home page and use it on another page (with different images?)

 

Thanks.

[vekia]

you can do it with css.

 

each page has got own id in <body> tag

for example product page has got: #product

cms page has got: #cms

 

in this case you can use

#product {background: red;} 
#cms {background:blue;}

[HH Services Limited]

 I can manage to add a background image to a ps 1.6.01 by pasting this code:

background: #FFF url('../themes/default-bootstrap/img/cloud3long.png')!important;

}

to the global.css file in the css folder of my theme and after ofcourse uploading the image to the image folder of the theme.

 

If I would want to have this background image only working in the home page, how should I modify the code that I have shown above?

Thanks.