Parallax not working as I want it too

[logoglo]

Hi there, see here:

HOME - TravelVuHouse

I have these setting:

But the parallax effect doesnt seam to be working…I added scale, but that enlarges the image, which I dont want, I want it at this size, this position, but with parallax.

Thanks.

[ruenel]

Hello @logoglo,

Thanks for writing in! What you are trying to do is not possible with the current Parallax effect that is present in the Advanced Background option. Perhaps this old thread can help you instead:

• Can I create a parallax effect like this with photos in X?
• Help with parallax

Kindly let us know how it goes.

[logoglo]

Thanks, that works, but now, how do I control the position of the background image? on a mobile, the chair at the bottom gets lost…how do I move the image up?

[ruenel]

Hello @logoglo,

You can use the Background Position property responsively to reposition your background images on a specific screen size.

• CSS background-position property (w3schools.com)
• CSS @media Rule (w3schools.com)

Sample code:

@media(max-width: 767px){
   .element-class {
       background-position: left center;
   }
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

[logoglo]

Perfect! that worked, thanks a lot

[ruenel]

You are most welcome, @logoglo.

[logoglo]

Actually, upon viewing it on an iPad, it looks like the background isn’t loading for some reason…take a look: https://www.dropbox.com/s/ghpimiaqr7chjbn/IMG_3262.MOV?dl=0

[ruenel]

Hello @logoglo,

There is no Mixed Content or CORS issue in your site. The browser cache in your iPad may need to be cleared or use private browsing mode instead before testing the site again.

Best Regards.

[logoglo]

I tested in both safari, and chrome on the ipad, incognito, cache cleared…and with https://travelhousevu.com/?g

The issue is still there.

[marc_a]

Hey @logoglo,

Would you mind sharing our iPad model so that we can check and replicate the issue very well? It is also be best to provide the version of Safari and Chrome.

Thank you.

[logoglo]

Sure:

I cant find the browser versions.

[raye]

Hi, I was curious and just tested with my iPad and I can see the background image, but only a small part of the blue wall. So maybe it just looks like, as if no image is there cause it is scaled too big. I think you need to apply some more CSS with media queries for iPad resolution to make the image smaller and position it so that the furniture gets visible…

[logoglo]

That seams strange, as the image size is set to “cover” that should make it fit right? what would be the css to make it work? How can I make it so its position is top, or make it fit on all screens?

[ruenel]

Hello @logoglo,

You have added this CSS:

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

This code only works best on larger screens. For the smaller screens, it will NOT properly display the background. It will only display part of the background image something like this:

It is best that you only apply to screen sizes larger than the iPad screen. Going back to the previous example code, you may apply @media CSS rule which applies to larger screens only like this:

@media(min-width: 980px){
   .element-class {
       background-attachment: fixed;
   }
}

This is to insure that you will have a parallax like effect or larger screens and still display the background images properly as soon as the screen gets smaller.

Alternatively, you can set a minimum height of the Column element that it will be 100vh for the smaller screens only.

And this will ensure that the section will display fullscreen making the background image visible.

Hope this makes sense.

[logoglo]

Thanks! I came to a compromise using your css above…thanks as always, though I think this parallax effect should be standard, like, without scaling…

[ruenel]

You are most welcome, @logoglo.

[logoglo]

Ups, spoke too soon. Though the css reflects in cornerstone, and in google console (different device sizes) it seams to not work on apple devices…I tested on other tablets, other phones that are not apple, and it works fine, but iPads, iPhones, the background is acting strange…

This is on a galaxy tablet:

This is on my android device:

And it’s still not showing on my actual iPad. Of course, I cleared all caches…

Is this a device thing?

[ruenel]

Hello @logoglo,

Please force the browser in your iOS devices to get cleared. It is best that you use private browsing mode or use Chrome or Brave browser because in most case, the cache of the Safari browsing seems to be displaying it.

Kindly let us know how it goes.

[logoglo]

Tried both chrome and safari incognito, and flushed cache, and as you can see in the images, that site is seeing the site for the first time on said devices…

[logoglo]

This is from a friends iphone, 1st time visit, so no cache…

And a different friend, also 1st time visit, using an iphone:

Please check on apple devices, the error seams to be there, not on androids.

Thanks.