Parallax background-position -- right or left instead of center?

Beaver Builder
1

Is it possible to change the position of the background image for a Parallax row background to either left or right instead of center? I have an image that needs to be right aligned to to the row, and it’s getting scaled out too far when it’s centered.

2

Hi Tim,

Can you provide a link to your site, so we can take a closer look, please?

Thanks,
Danny

3

[Content Hidden]

4

Hey Tim,

Can you place an extra class to that row, e.g., fl-right-align-bg, then add the CSS snippet below and see if it’s what you’re looking for?

.fl-right-align-bg .fl-row-content-wrap {
  background-position-x: right !important;
}

Ben

5

well, except Firefox doesn’t support the “background-position-x” property…

Looks good on Chrome, though.

6

Hi Tim,

Can you try adding the following and let me know if it resolves the issue for you.

.fl-right-align-bg .fl-row-content-wrap {
  background-position: right !important;
}

Thanks,
Danny

7

Well, This got the right align, but breaks the parallax effect (the Y axis stays at 0).

8

Hey Tim,

Looks like the only way around this is for us to override the default positioning of the Parallax background with jQuery. Can you try adding the JS code below and see if it works for you?

(function($){
    $( function(){      
        FLBuilderLayout._scrollParallaxBackground = function() {
            var win     = $(window),
                row     = $(this),
                content = row.find('.fl-row-content-wrap'),
                speed   = row.data('parallax-speed'),
                offset  = content.offset(),
                yPos    = -((win.scrollTop() - offset.top) / speed);           
            content.css('background-position', 'right ' + yPos + 'px');
        };    
    } );
})(jQuery);

Ben

9

I’ll try that out – any chance / thought on giving the option for left, right, or center on a per-row basis in an upcoming release?

10

Hey Tim,

Did you mean a setting to align left/right/center the Parallax background? If you’ve a minute, feel free to add that as a feature request on our User Voice! I just checked and there seems to be a similar request you can check on the link below. You can just vote for it. :slight_smile:
https://wpbeaverbuilder.uservoice.com/forums/270594-general/suggestions/11433426-add-a-parallax-image-offset-field

Ben