• Priority: Low
  • Status: Closed
  • Closed by: Marek (marek)
  • Closed on: 30.08.19, 12:34
  • Reason: Closed
  • Comment: Glad to help!

Ticket #15320 - Change parallax background image

Hi Marek,

I added a html widdget with custom css to get parallax effect on a image with text across it. It works well but I see another background image.
I would like to change the parallax image background but I am not able to localize the .php (or css?) behind.
Could you please help ? I work on alysum theme.

See attached screenshot.
fyi I am currently working on localhost.

Thank you in advance !

This ticket does not depend on any other tickets.

Benoit Duval (benoitduval) 12 Aug 2019, 01:25

I am afraid my explanations are not clear enough : I have got 2 parallax background image.
Here is another screenshot which shows the issue.

Marek (marek) 12 Aug 2019, 11:19

Hi, Benoit.
The image for parallax should has significant height. For example “1920×1500”

Benoit Duval (benoitduval) 12 Aug 2019, 14:23

The image i uploaded is "4000x3000", so it should be fine.

The background image I want to remove looks to be behind the image I uploaded (we see it through the margin) and it is a image from the asylum theme itself.
Is there a way to manage the background image in the setting ?
because I used a custom css to make this parallax effect but it may have a proper way to manage it, i guess!?

Benoit Duval (benoitduval) 12 Aug 2019, 14:30

The css code I use it the folowwing :

.parallax {

background-image: url("http://localhost:8888/prestashop/modules/pspagebuilder/views/img/DJI_0002.jpg");
height: 500%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

and I specified the class "parallax" in the "addition class" field in the html widget.

Marek (marek) 12 Aug 2019, 15:25

It's hard to understand what's wrong. Could you please give me a link to a page where I can see the issue?

Benoit Duval (benoitduval) 12 Aug 2019, 18:16

The css code I use it the folowwing :

.parallax {

background-image: url("http://localhost:8888/prestashop/modules/pspagebuilder/views/img/DJI_0002.jpg");
height: 500%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

and I specified the class "parallax" in the "addition class" field in the html widget.

Benoit Duval (benoitduval) 12 Aug 2019, 18:19

I will come back to you once the website is online, in few weeks.
Thanks

Marek (marek) 12 Aug 2019, 18:19

Ok, waiting for you

Loading...