Parralax image for mobile - see full width of image

Support
#1

Hi there,

In my blog, I have my feature image set as a parralax image at the top. This is great on desktop, but not so great below 900px

I can set the background image with css to contain, but I need to remove the parallax effect (for under 900px)

Do you have a suggestion on how to accomplish this?

You can see on this page: https://hybridpharm.com/2018/05/farm-to-pharm-campaign/

Thank you in advance

#2

Hello @Reform,

Thanks for posting in! To make sure that the image is contain and the parallax is disable when then screen gets smaller, please make use of this code instead:

@media(max-width: 899px){
  .x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
    background-size: contain;
    background-attachment: initial !important;
    background-position: top center !important;
  }    
}

Hope this helps. Kindly let us know.

#3

Hi @RueNel!

So this worked except there is a large green area below now.

I tried to set the height to auto and remove any margin or padding, but it wasn’t the issue.

I know the element it’s self has inline styling that defines height: 100vh; Could this be the issue? I can’t seam to over write This. Ideas?

Thanks :slight_smile:

#4

Hello There,

Please understand that the background image rely on the height of its container. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works especially because you are using contain.

Hope this helps.

#5

So changing the background size to 100%, the height to auto and reduced the padding to reduce the section hight.

Thank you :slight_smile:

@media(max-width: 899px){
.single-post .x-section.bg-image.parallax, .single-post .x-section.bg-pattern.parallax {
background-size: 100% !important;
background-attachment: initial !important;
background-position: top center !important;
height: auto !important;
padding: 35px 0 0 0 !important;
}
}