Parallax with fixed image

[yaqubb]

Greetings,

I would like to make a section with a parallax background with a completely fixed image(no movement) that doesn’t get blown up at all.

After searching through the forum, I tried the following CSS but the background image is still enlarged/blown up…

.x-bg-layer-lower-image {
  	height: 100%;
  	background-attachment: fixed;
}

Any idea where I’m going wrong?

Cheers

[nico]

Hi @yaqubb,

Thanks for writing in.

Little confust of what you want to achieve.

Parallax background with complete fixed image.

You could turn off the parallax to make your background fixed and it will not be blown up.

To turn it off, go to your element’s background then tick the parallax options

Hope it helps.

Let us know how it goes.

Thanks.

[yaqubb]

Thanks for getting back to me, but I want a parallax effect so turning it off doesn’t help. Perhaps “fixed” isn’t the proper word…

I simply don’t want the background image to be blown up at all since I need to show what’s at the very edge of the image. And I don’t want the background image to move at all while scrolling, just the elements above moving over the unmoving background image.

Compare these two:

Parallax - https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

No Parallax - https://www.w3schools.com/howto/tryhow_css_parallax_demo_none.htm

The top background image doesn’t move at all and the size isn’t increased in the parallax demo.

Does that clear it up?

Thanks

[basanta]

Hi There,

If you add background-attachment fixed it would take the height and width of the screen, not the section that has the background image.

The example you have share is the same as the background image size is the size of the browser screen. Try changing the height of the section you will see the image would cut off.
I have created a video to demonstrate how the image cut off after changing the height of the section.

So I would recommend you to use a big image or high-resolution image so that it couldn’t enlarged when you fixed the background.

Hope this clear to you!

Thanks

[yaqubb]

Hi Basanta,

Thanks for getting back to me but I’m having a very difficult time understanding your response. It’s also not clear that you understand my question in the first place.

I can’t really tell what exactly you’re doing to the section in the video. The background image I’m using is 1920px wide, so I’m not sure why it would need to be enlarged to fit my device screen.

My problem is that the image is being blown up(enlarged and zoomed in) when trying to make it parallax. I’d like it to remain 100% the original size without being enlarged at all. It’s not a resolution issue, I need what’s in the right and left edges of the image to be visible.

How can I get the parallax effect without enlarging the background image at all?

Thanks

[Alaa]

Hi yaqubb,

If your image is large enough as you mentioned, then you can add a custom class to this section, let’s say custom_bg, and add this CSS snippet in (X > Theme Options > CSS):

.x-section.custom_bg {
    background-size: contain;
}

Thanks.

[yaqubb]

Hi Alaa,

Thanks for the response but the image is still being enlarged even though it’s 1920x960px.

Any other ideas?

Also, the following CSS it applies to every section background image on my site. How can I tweak it to only apply to individual sections?

    .x-bg-layer-lower-image {
      	height: 100%;
      	background-attachment: fixed;
    }

Cheers

[ruenel]

Hello There,

Thanks for updating in!

1.) If you haven’t inserted the custom custom_bg class in your section, the css code given by Alaa will not work. The code will also give you problems later on. I would recommend that you review how the background image works. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how it image works.

2.) If you want to apply your css code in a particular section only, you will need to edit your page back in Cornerstone/Pro editor, click the section and find the “Customize” tab for you to insert a custom custom_bg class.

And then you may use this code:

.custom_bg .x-bg-layer-lower-image {
      	height: 100%;
      	background-attachment: fixed;
}

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