Prevent image to repeat itself, tiling or get stuck on scroll.
Are your images behaving strangely? Tiling, getting stuck or repeating on scroll?
Prevent image to repeat itself, tiling & get stuck on scroll.
Are you having problems with normal images repeating themselves, tiling, getting stuck and making strange lines all over your website when scrolling up and down? This might be because you have another background image set to repeat!? Follow these steps to prevent image to repeat itself, tiling or get stuck on scroll.
Steps to prevent image from repeat itself, tiling & getting stuck:
- Start by checking if this image problem is occurrin in every browser: Chrome / Safari, Explorer or Firefox. Good to know.
- Validate you code to make sure there are no obvious errors, for example unclosed elements or wrongly nested elements. Validate your website here: https://validator.w3.org/
- Correct all errors (if any) above.
- If you are floating elements or images, use class .clearfix to clear any floats after the element containing floats has ended. Clearfix CSS class might look something like this:
content: " ";
Simply add class .clearfix to any elements containing floats.
- Try to set the background to no-repeat on the element causing problems or the parent of the element causing problems.
- If none of the above works? Are you using several layers of background images on top of eachother? Some fixed, some repeated and so on. Try to remove the backgrounds one by one to see if this fixes the problem, or leads you in the right direction…
(Firefox browser have been having similar problems with images and icons tiling or repeating when this article is written)