Background image, hot to make it responsive and only for the home page

[HH Services Limited]

Hello, I managed to add a background image to a shop by pasting:

body, #page, header, .columns-container {

background: #FFF url('../img/background.jpg') no-repeat !important;

}

to the global.css (under body) file located in default-bootstrap\css  and by previously adding the /background.jpg image to the themes\default-bootstrap\img folder.

 

Question is, how could I make that this image is shown in the home page only, and how to make it reponsive so that it adapts on size to the screen of cell phones and tablets?

 

It is a hard one, but a very useful one. Thanks in advance if you can solve the puzzle!

Edited May 2, 2017 by HHServices (see edit history)

[Rosa Lynn]

Good question, I really would like to know this one.

[Knowband Plugins]

Hi,

 

In Prestashop 1.6.X, you can do this by adding CSS for home page only.

 

To check home page you can use PHP variable "$page_name" as -

 

<?php

if ($page_name == 'index') {

 //Add you style code here

}

?>

 

To Put any piece of code on any page there is a module for that it will definitely help you a lot.

 

https://addons.prestashop.com/en/page-customization/21546-knowband-custom-css-and-js.html

 

 

In case, of any query or confusion, please feel free to ask.

Edited June 8, 2017 by Knowband Plugins (see edit history)