Prestashop 1.7.4.2 - How to use 3D background image for the shop

One of the ways to attract customers is to have an attractive background image - and this tutorial will show you how to add a 3D perspective background image of a shopping mall that makes your online store items look like inside a mall. I am going to demonstrate this on Prestashop 1.7.4.2 and follow the guide below.


1. Use FTP I am using FileZilla

2. Look for the folder .../htdocs/themes/classic/assets/CSS

3. Open / edit the custom.css file using notepad++

4. Add this code to the custom.custom css file

#wrapper {
background-color: none;
background-image: url("https://sixtrees3d.files.wordpress.com/2014/03/concierge.jpg");
opacity: 0.8;
background-size: cover;
background-repeat: no-repeat;
background-size: none;
}

Note: You can change the url of any image where it is hosted by replacing the highlighted in red

5. Now save the file and re-upload to the same directory and overwrite the existing custom.css in the server using FileZilla FTP

6. Then login to the PrestaShop admin back office

7. Under Configure > Advanced Parameters > Performance click on "Clear Cache" button

8. Now browse to the shop you will see you will view the shop background looks as below. Click to enlarge the image you will the as if the background realistic within a mall since it is using 3D perspective