Docs

[avanaa]

I have a few background image (not all) that rescale oddly on ipad screen. It seems to be on a page I made with visual composer. On desktop it’s all good. Maybe some custom css would fix this.

This is the page: http://www.avanaa.ca/notre-histoire

Cheers

[Joao]

Hi There,

They all look good on my end, would you mind to clarify how you would like to change it?

Thanks

[avanaa]

As I wrote, on desktop it all looks fine. But on ipad or iphone the images (http://www.avanaa.ca/notre-histoire) are super zoomed and pixelated (except the first one on the page… the only background image displaying properly has no parallax effect so it may be linked to this!?).

Thanks

[Friech]

Hi There,

That is how background image behave, please read this post on how background-image works.

If you want, you can create a portrait oriented version of those images and we will swap it when the page is viewed on mobile.

Thanks.

[avanaa]

Hmmmmmm… I do know how background image works.

And you obviously didn’t look at the images on the link on ios device (we’re talking about 50x zoomed in the image).

What I’m saying is combining (1) visual composer, (2) background parallax and (3) ipad or iphone… something goes wrong. All is good on cornerstone and/or android device or desktop.

[avanaa]

I switched off all parallax for now, so the issue is not visible at the moment.

If there would some css to inactivate parallax on small screen, that could do the trick for me. Is it doable?

[Nabeel A]

Hi again,

It looks like you’re using low resolution images, please make sure to use high resolution images for parallax backgrounds.

To disable the parallax effect in smaller screens, add the following code in your Customizer

@media screen and (max-width: 979px){
.x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax {
    background-attachment: scroll !important;
}
}

Let us know how this goes!

[Author]

Posts