Background repeat

Often when using a large image as a background, we tend to forget to consider what happens when it is viewed on a large screen.

By default, the background will repeat.

This is mostly not visible on laptop screens, but can be clearly seen on larger screens.

Small screen

Large screen

To avoid this behavior in advance, make sure to reset background-repeat.

.hero {
  background-image: url('..');
  background-repeat: no-repeat;
}