How can a fixed position background image auto-fit the page width?

Support
#1

Hi.

How can I get a background image to stay fixed AND automatically resize to fit (full) width?

The classic image element prevents scrolling but clips both sides.

The section background setting fits the width correctly but doesn’t stop my image from scrolling.

Thank you

#2

Hi there,

Thanks for writing in! I think you’re looking for a background parallax effect? To do this, enable Background Advanced mode

Then after selecting your section’s background image enable Background Parallax effect:

If this is not what you’re after then please share some screenshots or a similar example so we can take a look.

Hope this helps!

#3

Your screenshots match my settings.

The upper image is a classic image element that remains fixed when you scroll. This is the effect I want, but less than half the width of this photo is in the frame.

The lower image (Section 9) is a section background where the full width of the image is visible… but it moves with the page.

NB, there’s no related CSS to delete.

#4

Hi There,

Thank for the clarification but, I’m still not certain what you’re trying to do. Is that the site you’re working on below? Its in under construction mode.

I understand that this has something to do with background-image responsiveness. Keep in mind that background-image is responsive in a different way please see this link on how background-image works. The default behavior of background-image is the cover, the image will try to cover the entire section/container by expanding itself resulting some parts of it may not be visible within the container. You can force the background-image to always fit to its container by using the background-size:100% 100%; on the section, but that will squeeze and stretch your background-image on some screen-sizes specifically on mobile phones.

Thanks,

#5

Sorry it hasn’t been clear. An example should have come earlier. So…

What are the steps to achieve this effect https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm in X?

  • Image width is responsive at larger sizes
  • Image stops shrinking below a certain height (but never squeezes/stretches)
  • Image remains fixed on the page as you scroll.

Thanks again.

(Late edit: The same effect is below the “Incredible Shortcodes” headline in this Integrity demo.)

#6

Hi There,

Thank you for the clarification, ok let’s take that example. If you notice the first and last section in there is taking the full height of the screen regardless of the screen size (desktop or mobile). That is because they applied a min-height: 100% in those sections. This ensures that the section has a height to showcase the background-image even if there is only one small element on that section.

And they did not actually use a complex parallax effect on that section, they only use background-attachment: fixed; to get that effect.

So if you want that effect, please turn off the Parallax effect on your section and add this on the Section’s Element CSS area.

$el {
  min-height:100vh;
}
$el [class*="x-bg-layer-lower"] {
      background-attachment: fixed;
}



Now the tricky part.

The background-image is responsive in a different manner (see my previous reply)

Those background-image are set to background-size: cover; so it won’t shrink nor squeezes/stretches. But it will make the side areas not visible. Imagine fitting a landscape image on a portrait container without cutting it or squeezing it. The only way around this is to position your focus object in the center of the image like what they did on that example site.

The background-attachment: fixed; will take care of that.

Hope this shed some lights,
Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.