[Cormoran42Participant]

Hello,

I have a content band on this page : https://cueilleurs-sauvages.ch/saute-de-tofu-ail-des-ours/

I’d like to have a background image with parallax. I’d like the image size to fit the container block horizontally.

When parallax is set to “none”, the image size fits the container. But when parallax is “true”, the image size is bigger than the container.

Can you help me please? Thanks!

Michaël

[Nabeel AModerator]

Hi there,

Thanks for writing around! I checked your page and couldn’t find a parallax image, can you please activate the parallax image so we can take a closer look?

Thanks!

[Cormoran42Participant]

OK now it’s activated!

Thanks

[Rue NelModerator]

Hello There,

When you activate parallax, the background image will adjust to accommodate the parallax effect. Nothing will happen when the image would just fit the container. No parallax effect would happen then. This is how parallax image works. I would highly recommend that you upload an image larger than 1200 pixels as a background image.

Please let us know how it goes.

[Cormoran42Participant]

Ok I understand now! Is it possible to apply a css style to the image. For ex to darken it without modifying the original?

thanks!

[Rue NelModerator]

Hello There,

Yes you can always have something on top of the image that will darken the original image. Please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.x-content-band.bg-image.parallax, 
.x-content-band.bg-pattern.parallax {
    position: relative;   
}

.x-content-band.bg-image.parallax:before, 
.x-content-band.bg-pattern.parallax:before {
    content: "";
    display: block;
    background-color: rgba(0,0,0,0.65);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

We would loved to know if this has work for you. Thank you.

[Cormoran42Participant]

Great thanks!

[RadModerator]

You’re welcome!

[Author]

Posts