How to make the background image covers the page without repeating it when scrolling the page?-CodePudding

The problem is that I've a background image, when I resize the screen to be smaller or if the content becomes bigger than the viewport and the scroll appears it is repeated.
What I want to make is to have a single background image (not repeated) for the whole page.

.App {
  text-align: center;  
  background-image: url('./colorful-bg.png');  
  background-size: 100% auto;  
  min-height: 100vh;  
}

CodePudding user response：

You should add no repeat:

background-repeat: no-repeat;

If you want the height to also stretch to take up the entire viewport, you will also need to change your background size:

background-size: 100% 100%;