Parallax background image scale incorrect / too large

Beaver Builder
1

I have a full-width row with parallax background image 1920px x 650px.
I have padding-top on the empty column element set to 246px to expand the box vertically.

When my page loads the image loads at full 100% size regardless of screen or container size, making the position hard to control, and cropping out much of the image. Same issue in Firefox and Chrome.

If I inspect the element and add an attribute of background-size:cover or box-sizing:border-box to the row wrap it forces a redraw which corrects the problem.

I thought maybe that the dynamic inline CSS styles are being applied at the wrong point by the parallax row’s JavaScript, but then I set up a non-parallax test with my own html, and similar CSS and the problem still occurred. It seems to be a problem when using a combo of background-attachment:fixed and background-size:cover. The image appears at full size.

Full width example
Fixed width example
Manual Example

I haven’t been able to find much of a mention of this behaviour on the interwebs.
Any ideas?

Thanks

2

Hi Simon,

Those two CSS properties don’t like one another and will cause the issue you described. I did a bit of research and found this article. In the comments there are few work arounds. Please, be aware that I haven’t tested these.

http://www.carsonshold.com/2013/02/css-background-sizecover-doesnt-like-fixed-positioning/

Thanks,
Danny

3

Thanks Danny,
On StackOverflow I came across a mention of using background-size: 100% auto; which for wide, thin images is marginally superior to background-size: contain; but as soon as the viewport is narrowed then the offset is wrong. When scrolling there’s a gap within the frame where the pic is too short, so it’s not much good for mobile devices (unless a taller image is loaded, but then we’re increasing the page size for devices that can least afford it).

I like the fact that Beaver Builder’s parallax effect is pretty simple and lightweight:


speed   = row.data('parallax-speed'),
offset  = content.offset(),
yPos    = -((win.scrollTop() - offset.top) / speed);
content.css('background-position', 'center ' + yPos + 'px');

In theory it wouldn’t take much to add an extra offset amount from a manually-set field into that.
(I sacrificed a vote there…)

But having had a peek down the parallax rabbit hole, I’m realising now that an offset amount probably wouldn’t help much, given the wide range of usage and viewport variables.

So it’s probably going to come down to overriding CSS with media queries on a case-by-case basis eg.


.fl-row-bg-parallax .fl-row-content-wrap {
        background-size: 100% auto !important;
}

@media (max-width: 1024px) and (min-width: 769px) {
    .fl-row-bg-parallax .fl-row-content-wrap {
        background-size: 127% !important; /* whatever is required */
    }
}

/* etc */

…which I’m fine with.

Thanks again

4

Hi Simon,

Thanks for posting your feedback on our UserVoice and your example above, we appreciate it.

Thanks,
Danny