Parallax Hero section

[designerken]

I am trying to recreate a hero section that uses parallax scaled to 150% but the image is using background-attachment: fixed; this is to not scale the image but to have it move up/down with scroll and the section below it look like it is moving above it when scrolling.

I have the effect working but there is an issue with the background-position value.

I have it hard coded to background-position: 50% 294px, the 294px is the value on page load I was getting from the transform property transform: translate3d(0px, -294px, 0p.

However this value is dynamic and changes depending on screen height and the value entered on scaling which I have at 150%.

I need to have this value in the background-position property to always be the opposite value that is calculated, since I cannot get 0 to work in the background-position property so that the top of my image is at the top of the section.

Can you tell me how this value is calculated? or recommend a way to always have the at positioned at the top?

Here is a sample of the hero I am trying to reproduce: Hero Parallax

[ruenel]

Hello @designerken,

Thanks for writing in!

The value is calculated dynamically by the Parallax script. Have you added a custom inline element CSS? I can see that you added this:

$el .x-bg-layer-lower-image {
    background-attachment: fixed;
}

Add the background-position: 50% 294px and transition: none !important; as well in your code.

If this is not helping, please provide us access to your site so we can check out your background settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[designerken]

Hello @ruenel

Hard coding the 294px is my issue. On a larger screen that value wont work. This value needs to be the opposite value of what the parallax script is setting initially. I did have the CSS you mentioned and added the transition property as well.

This is the current CSS for the element:

$el .x-bg-layer-lower-image {
   background-attachment: fixed;
   transition: none !important;
}

@media (max-width: 1199px) {
  $el .x-bg-layer-lower-image {
    background-attachment: inherit !important;
    background-position: center !important;
  }
}

If you refresh the page you will see that there is a black bar below the yellow image header image this is due to that offset on larger screens. I basically think that the top of the image needs to be set to the 0px Top position on page load like the demo example. But the Pro theme’s use of parallax is different.

Here is the settings for the bar element:

[ruenel]

Hello @designerken,

Please understand that the attribute background-position will the X and Y position of the image. This is why you are seeing a black bar on a larger screen. Just position it to the center instead. If you hard code the background-position, it should go with your custom CSS and not on the background layer options.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Kindly let us know how it goes.

[designerken]

I edited some code before your reply. Your video of the site doesnt show the black. bar as I i fixed that but the image does not move with the scroll as you see in the demo. Setting the background position to center is not what I want.

[ruenel]

Hello @designerken,

Set your background-position to 50% and with 25vh or 25 percent of the vertical height of your browser screen.

Check out the example URL in the secure note below.

Hope this helps.