Parallax with fixed image with Pro

Support
#1

I’ve set up parallax with fixed image for some pages on the beta version for a site. It’s working well on most devices. However, for screens between 979 and 1920 px wide, the background image is getting clipped on the left side (e.g. devices that are 1024x768, 1280x800, 1366x768, 1440x900, 1680x1050). Also the background image isn’t aligned centre horizontally, although I’ve tried to get that to happen (with using contain and center for size and position, and applying center align in row setup). I have included custom CSS to make sure fixed parallax works on Firefox (got the code from another topic on this forum).

Here’s the URL to one of the pages with the problem: https://sp-40.thumbprintbooks.ca/principals-josh-pertnoy/

I’m sure I’ve set something wrong, but can’t figure out what. I’d be happy to provide login credentials for you to check. I’m using Pro (current version, i.e 4.2.3). The problem is in Row 3 for XL, LG, and MD. Thanks.

#2

Hello Larry,

Thanks for writing in! The image looks like being clipped to the left because your navbar is also on the left side. You are using the background-attachment: fixed; and this means that the image will not scroll and it is fixed within your browser window. The position of the background image was aligned to the browser window and with the column or section where you have inserted it. Take into account that the navbar is on the left which covers the left side of the image which is why the background image is off-centered.

Hope this explains it briefly.

#3

I understand. Is there a way to set the left margin or padding for the background image so the width of the menu bar on the left is taken into account (the menu bar on the left is 10 em)?

#4

Hello Larry,

The padding or margin can only be applied to an element. The background image is just an attribute of the section element. Hence, you can set the left margin or padding for the background image.

Hope this helps.

#5

Hi, Ruenel. In the last sentence, did you mean to say I “cannot” set the left margin or padding for the background image? When I change the left margin or padding for the section, row, column, those changes seem to affect everything EXCEPT the background image. Is this a limitation with designs that use a left or right menu?

#6

Ruenel, I just want to make sure I can’t make an adjustment to force the background image not to “hide” behind the left menu bar. If that’s the case, I’ll modify the background image to have enough white space on the left side to account for the menu bar. Thanks.

#7

Hi Larry,

Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

You can adjust the position of your background image by using the background-position CSS property. Please check the articles below for more information about background-position.

Hope that helps.

Thank you.

#8

Thanks. That helped clarify . In the end I have decided to add some white space to the left edge of parallax images so the content is not eclipsed by the side menu bar. That seems to be the best solution I can find for devices 979 px wide or wider. Again, thanks for your help.

#9

Hi Larry,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

#10

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