-
Posts
-
Hello! Whenever I have background images set to paralax, they look great on a normal computer monitor size, but when you view them on mobile, the image seems to move too fast and the image gets tiled. Meaning, as you scroll down, the bottom of the image goes too high and is followed by the top of the image. It just looks really messy and unprofessional and I was wondering if there’s a way to get it to just stop moving when it reaches the bottom or top of the image instead of scrolling further and starting the image over.
If you want to see what I mean, navigate to my site on your phone and scroll through the pages.
I have the size of the image set to “Cover Area”. But I’m not sure if there’s anything else I can do.Hi Zach-
Thanks for the great question, and thanks for using the Post and Page Builder for WordPress.
There are two ways you could fix this, depending on your design preference.
First, you could reduce the height of the block with the background using the padding adjustment tool, either on the top or bottom of the row:
Or, you can manually add a CSS rule to prevent the image from tiling, even in large blocks. This will be the most effective way to prevent it, regardless of the image size, but you’ll need to keep in mind that the default background color will be shown where the tiled image was previously. Navigate to Appearance > Customize > CSS/JS Editor and paste this line into your CSS Code field:
.background-parallax { background-repeat: no-repeat; }The CSS worked perfectly! Thank you!
- The topic ‘[Resolved] Paralax Background Images Tiling’ is closed to new replies.
