Sometimes when you set a background image on your web page, it displays as repeating tiles on the page. So, the problem looks like this :

As you can see, the tiles may be vertical, or horizontal or both. It looks very bad when it comes to web designing.

To fix this problem, the best way is to use a simple CSS code :

background-size: cover;

This code scales the image to completely cover the background positioning area while trying to maintain the aspect ratio without repeating itself.

Other ways to solve the issue :

• Avoid using portrait images in background, use landscape images instead when it comes to orientation.
• Avoid using small size images which do not cover the entire screen area of the background.