How to Make Background Images Not Repeat with CSS

If you use the CSS property background-image to embed an image as a background on your website, you might have noticed that your image gets repeated infinitely to fill up the width and height of your web page.

That happens because by default, browsers have the CSS property background-repeat set to repeat.

To stop background images from repeating, simply override the default repeat value with no-repeat, like this:

body {
  background-image: url("path-to-image.jpg");
  background-repeat: no-repeat;
}

Now your background image only shows up once!