Parallax background on mobile getting stretched?

Support
#1

Hello!

I have a background set to parallax but when viewed on a phone the background gets stretched and pixelated like crazy

what CSS can I add to force the background to display as parallax instead of stretched when viewed on mobile

the background is on the pages welcome, about, contact, exhibitions, projects, and contributors

login info attached in the private window below

#2

Hello Jared,

Thanks for writing in!

I have checked your homepage and I can see that you only have one section with more than 10 row container. The background is in your section and the height of the section is expected to expand exponentially in smaller screen. I would recommend that you use this custom css:

#x-section-1 {
    background-size: 100vh auto !important;
}

Please keep in mind that this is just a band aid solution. It may not totally resolved your issue. I would highly recommend that you understand first how the background image works so that you can consider how you can have a better placement of your background image in the layout. 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.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps.

#3

@ruenel Thank you for this!

I think you misunderstand my issue

I know what you are saying, but it is my understanding that with parallax this should not be a concern on mobile because it would keep the background image close to it’s original proportions while you scroll through the content ontop of it

Could you please help me with some CSS to implement this on my welcome page? Also now when I rotate the phone the background is too skinny- how can I make it stretch to the width of the viewport AND be parallax so that there is minimal stretching?

The biggest problem is the white bars on either side of the background when I rotate my phone sideways. I don’t understand why these white bars are there even with the background-size: 100% 100%; set - how can I remove these white bars and make the background fill the whole viewport whether horizontal or vertical?

#4

Hey Jared,

To preserve the parallax effect in smaller devices, you can add the following code in the Element CSS of the section that has the background image:

@media screen and (max-width: 979px) {
    $el {
        background-attachment: fixed !important;
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.