Parallax w/ Fixed Background on Mobile Zooms Background

[ErgoArchitecture]

Hi, I followed this thread to get my parallax working with a fixed background. However, in addition to the parallax effect not working on mobile, which I understand is by design, my background zooms way in on mobile instead of retaining its cover setting as was occurring to the OP in the thread above. Did you ever get this issue resolved? How can I fix my background on mobile?

Here is an example of my problem. It is the second image of the house that is working great on desktop but zoomed way in on mobile. I have the .x-bg-layer-lower-image {background-attachment: fixed} code in my page CSS. If I delete this code the image returns to normal on mobile. I tried background-size: cover in that CSS as well but it didn’t help.

Any help with this would be much appreciated! Thanks!

[ruenel]

Hello Ergo,

Thanks for writing in! Please be advised the background image will always try to cover the whole section. In smaller screens, the height will have become more higher and so the image will become higher as well. With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

You might use this code for the mobile screens instead:

@media(max-width: 767px){
  .x-bg-layer-lower-image {
    background-attachment: fixed;
    background-size: contain;
  }
}

Hope this helps. Please let us know how it goes.

[ErgoArchitecture]

Hi RueNel, thanks for the response, but that is not the problem. I am familiar with, cover, image proportion, and so on. The problem is that on Apple devices using background-attachment: fixed it zooms in to like 20 pixels across no matter what I do. If you look at my example on an Apple device you will see the problem immediately.

I didn’t have an Android device to test on at the time, and since the problem was on both Safari and Chrome I thought it was a mobile issue, like no parallax. It turns out that my pages work fine on Android and the problem is Apple specific.

A fellow named Victor posted a solution on Stack Overflow (about half-way down), but it seems to fix the image to the page using body:after to avoid fixing the background. I am not sure how to apply this to an X-theme section?

If that fails, is there any other workaround? Apple products are a pretty big segment of the market to simply ignore…

Thanks!

Steve

[paul.r]

Hi Steve,

You can try adding a unique class to your section.

Then add the :after to that class

eg.

.my-section:after {
 content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Hope that helps

[ErgoArchitecture]

Hi Paul,

I couldn’t get that to work, but I found an elegant workaround:

@supports not (-webkit-overflow-scrolling: touch){ /* CSS for other than iOS devices */ 
    .x-bg-layer-lower-image {
		background-attachment: fixed;
  	    background-size: cover;
	}
}

Apparently only iOS supports overflow scrolling, so for now everything else will get the fixed background, and the background will simply scroll with the section on iOS devices. Far better than getting just 20 pixels!

Now that the existential threat has been put down, I am getting greedy: I would like to enable parallax on iOS instead (without parallax on other devices). Are is it possible to target parallax behavior with CSS? I want to add code to the section’s CSS to target iOS only:

@supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */
    [enable background parallax on lower layer]
    [set lower layer size]
    [set lower layer direction]
    [set lower layer reverse]
}

The trouble is I don’t know what CSS to put in the code above where the square brackets are. The article below seemed to address that, but in the end the situation was resolved another way and never answered:

Section background Parallax using in-line CSS?

Thanks for your help with this!

[rad]

Hi Ergo,

I tried and it’s not possible, the CSS only applies positioning and size but the parallax behavior or movement is controlled by javascript. The same as other libraries like from slider, all parallax are implemented through javascript.

Thanks!

[ErgoArchitecture]

Bummer. Thanks for looking into it though. It will be fine without, but that would have been a nice touch!

Thanks again for the help!

[rad]

You’re most welcome!