How to add background to particular CMS pages?

[jakjakjak]

Hello all, new to Prestashop here, hope to have a helping hand from the good folks here on the forum! :-)

 

I am on PS 1.7.1.2 and trying to setup some "kinda landing page like" very simple CMS pages composed of some text and a couple of buttons, and would like to add some background images in full width, I would like to be able to control what particular background is on what page as they will be somewhat related tto the particular message on the page.

 

However, as simple a task as this probably is, I can not work it out, been spending way too much time tryiung to figure this out already.. ;-)

 

Been googlin' like crazy, but every solution I can find seems to be for version 1.6 and earlier, and a lot has been changed in the core since those days I reckon..

 

Can someone point me in the right direction, I would like to code a background image on a particular CMS page directly with html/inline CSS..?

 

Thanks in advance guys and gals! :-)

[jakjakjak]

Noone knows..? ;-)

 

I should have thought this would be an easy nut to crack for someone that has been working with PS for a while..

 

Good karma to be sent out to anyone who can point me in the right direction!

[BonPresta]

Noone knows..? ;-)

 

I should have thought this would be an easy nut to crack for someone that has been working with PS for a while..

 

Good karma to be sent out to anyone who can point me in the right direction!

 

 

all these pages have an identifier - id="cms"

 

you can use it to add a background image

body#cms {
backgroung: ...
}

[imen sepahan]

in your cms page go to editor > source code

 

then you can add div tag and set the background image 

 

 

 

add this tag, at a firt line of all other html that you have

<div style="background-image: url('YOUR BACKGROUND IMAGE URL');">

CMS page content and other html code should be here (between div tag)

 

 

add this tag at the end of all html code that you have

</div>

Edited September 25, 2017 by imen sepahan (see edit history)

[sickshot]

heres the solution for styling cms pages by its ID:

point to a specific cms page with ".cms-17" and then to a class you need.

for example:  .cms-17 .revealimg

 

at the end it should look like this:

.cms-17 .revealimg {

width: 100%;

}

 

this works on 1.6, dont know how ids are on 1.7 but the thing should be similar...