Pictures zooming in when switching from Scroll to Fixed

BB Theme
1

Hi,

I have a row with a photo for the background. Row width is set on full width, content width is fixed

When I switch the photo in the background of the row from scroll to fixed (“attachment”, is the setting name), the photo zooms in… IE: The “scrolled” setting is zoomed out, and when I switch to “fixed” it zooms in. I like how the photo looks on scroll, but also want the “fixed” effect (without the zoom)

I have scale at “fill” (I do not like fit in this instance)

It zooms in regardless of where the “position” is set to (IE: center top, right top, etc.)

Is there any way to stop this from zooming in when switching from scroll to fixed?

2

Hi John,

Can you provide temp admin access, so we can take a closer look, please?

Thanks,
Danny

3

[Content Hidden]

4

Hey John,

When the background-attachment is set to fixed, it gets fixed relative to the viewport, not the element/container it is in. This is to achieve the fixed effect. And the browser does it while keeping the aspect ratio, so as to not make the image look stretched/shrunk hence the cropping. Long story short, that’s how fixed backgrounds work.

We can reduce the length of the background image via custom CSS but you’ll have to play around with the values. You can place a CSS class to the row in question, fl-reduce-bg-size, then add the CSS snippet below.

.fl-reduce-bg-size .fl-row .fl-row-content-wrap {
  background-size: 100% 80%;
}

You only need to play around with the second value, as the first is for the width.

Hope this helps! :slight_smile:

Ben

5

Didn’t work

Do I put this CSS snippet in the customize panel, or tools > global settings (this shows up when the pagebuilder function is open).

Thanks

6

Ah, sorry about that John. There’s an extra space on the code above. Try this instead.

.fl-reduce-bg-size.fl-row .fl-row-content-wrap {
  background-size: 100% 80%;
}

Re your other question, it works either way so it all boils down to personal preference. I’d suggest placing them all in one place so it’s easy to change in case the need arises.

Ben

7

We’re getting closer.

Deleting the space made it do stuff.

Problem now is when I gradually shrink the window horizontally, the picture scrunches. It doesn’t scrunch at all when the code is not in there (and it’s set on fixed).

8

Hi John,

Are we referring to the image of a man sat on a bench? If so that image is set to scroll, have you reverted back to that attachment setting?

Thanks,
Danny

9

Yes, I reverted it back.

When I added that code, I can get it so it doesn’t “zoom in”… but when I shrink the screen laterally the man on the bench (and anything else I set to fixed on another page) gets scrunched and doesn’t look good.

10

Hey John,

I visited the site, set the background back to fixed, added the background-size property, squeezed the page, and it looked fine on my end, at least for me. Can you share a screenshot of how it looks from your end?

Ben