CODEWITHSUNDEEP
css
Qatr El-Nada
Qatr El-Nada

Reputation: 33

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

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;  
}

Upvotes: 0

Views: 498

Answers (1)

kosher
kosher

Reputation: 333

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%;

Upvotes: 2

Related Questions