1.7.2 How to add picture as a full background?

[ignasmilin]

can someone fully explain how to do it? I would like to add picture as a background. 

[gabdara]

Put your background image in your theme assets/img folder (create it if not already there).

Then open assets/css/custom.css and add:

#wrapper {
  background-image: url(../img/bkg.jpg);
}

[PrestaLover]

Hi there,

Where you exactly want to add picture as a full background? If you have a html class you can add a background image with css. Suppose, your html class is 'new-product', so your background image css code will be like this 

.new-product {
  background-image: url(../img/'image-name'.'format');
}

If you want to add more background images in more sections of cms pages, you can use Visual Composer Prestashop for this. Just add background image on visual composer row settings. Most importantly, you can use parallax background with visual composer.

Thanks

[PrestAlec]

On 8/6/2017 at 12:43 PM, gabdara said:

Put your background image in your theme assets/img folder (create it if not already there).

Then open assets/css/custom.css and add:

#wrapper {
  background-image: url(../img/bkg.jpg);
}

Hi there!
I'm using:
- Prestashop ver 1.7.6.8
- Cache dissabled
- Classic Theme ver 1.0.0

I had changed the background of Shop_1 in this exact way, and it worked just fine.
Then I did the same with another one, Shop_2, (different instance, exactly same Softaculous installation), but it doesn't work... I have been looking around Prestashop's Forum and the rest of the web, for the last 3 days and nothing works.

Despite the fact that both installations are the same (so they should not have different configurations that I'm aware of), I had to start testing unreasonable items: 
-- changed .jpg by .png formats,
-- checked image file permissions,
-- downsized the images, 
-- added other modifiers (background color) to custom.css to check the file was doing his job (it does),
-- changed the custom.css in the browser debugger live to see the changes,
-- even modified the #wrapper section in the theme.css in the browser debugger live (like shows the uploaded image)

I'm completely lost (as a good newbie should be hahaha).

Anyone can help?

Thanks!

Edited November 6, 2020 by PrestAlec (see edit history)

[PrestAlec]

Update: I have just find my problem. I have been using this path "../img/image-name.jpg" since the beginning.
I now tried with the image's full URL (https://www.mydomain.com/img/image-name.jpg) and it now works.
What I still don't know is why in my case the relative path does not work... ;(

Fixed! 
Thanks anyway.

[hardwaretoolsgr]

hello, i have been trying to do the same for my page, although i am an inexperienced user ...

I went to public_html/themes/classic/assets/img

and copied the background image there

then went to

public_html/themes/classic/assets/css

edited the custom.css file and i added the code there

#wrapper { background-image: url(../img/bkg.jpg); }

with my background images name instead of bkg.jpg

Any help?

Edited December 4, 2020 by hardwaretoolsgr (see edit history)