Parallax effect

Hi, when viewing my website www.babyworldandme.co.uk on my ipad (ver10.1.1) the parallax background image either isn’t visible or is really blurred. Anything on a PC or android device is perfect.

Here’s a couple of images

Any ideas what is causing this? Must admit I’ve never noticed it before.

Thanks in advance

Hi,

Unfortunately on iOS the parallax effect will distort the images like that, so you can fix that issue if you set the background-attachment to scroll on screen-sizes below iPad’s screen-size, so please try this Custom CSS ( this will work for all elements from your homepage ):

@media only screen and (max-width: 768px) {
.panel-row-style[data-hasbg="hasbg"] {
    background-size: cover;
    background-attachment: scroll !important;
}

.slides-container .slide-item {
    background-attachment: scroll !important;
}

.panel-grid-cell {
    background-attachment: scroll !important;
}

.panel-grid {
    background-attachment: scroll !important;
}

.panel-row-style {
    background-attachment: scroll !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba, many thanks for taking to time to reply. I added the CSS to my childtheme style.css as suggested and retested (cleared cache) but unfortunately this didn’t result in any change?

Hi,

I have inspected your site and I don’t see the Custom CSS applied, have you removed it after you’ve tested it?

Best Regards,
Csaba

Hi Csaba, yes I removed it after it didn’t work. I did delete the cache in my dashboard and browser as well to refresh after the change but it definitely didn’t work I’m afraid.

Hi,

Please re-add and leave the CSS there / then clear the cahce, so I can check why it doesn’t works.

Best Regards,
Csaba

Hi Csaba, many thanks for your reply. I have added the CSS back to my Child Theme’s style.css and cleared the site cache for you to look at.

Just noticed when my ipad is positioned in portrait the images I mentioned are fine. As soon as I turn the ipad to landscape site changes to what can be seen in the posted images so happens when stretched.

Hi,

You can make the CSS to affect the landscape iPad view too, by replacing the previous CSS with this one:

@media only screen and (max-width: 1024px) {
.panel-row-style[data-hasbg="hasbg"] {
    background-size: cover;
    background-attachment: scroll !important;
}

.slides-container .slide-item {
    background-attachment: scroll !important;
}

.panel-grid-cell {
    background-attachment: scroll !important;
}

.panel-grid {
    background-attachment: scroll !important;
}

.panel-row-style {
    background-attachment: scroll !important;
}
}

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba, this worked perfectly. Thank you for your help and time to fix this for me.

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba