How do I make my background-image fit the entire screen CSS

Question

CSS:

    body{
      background-image:url("img-address");
    }

I want the image not to repeat itself multiple times, but to span the entire screen. I don't want to use a normal image I want to use background-image.

try using `background-repeat: no-repeat` and have a look at the unit `vh` for the spanning the whole screen — Strahinja Ajvaz, Mar 27 '18 at 00:07
This worked for me: background: url(image.jpeg); background-repeat:no-repeat; background-size:100%; — vicsar, May 25 '20 at 17:18

score 4 · Answer 1 · answered Mar 27 '18 at 00:09

4

you can use background-size:

https://www.w3schools.com/cssref/css3_pr_background-size.asp

body {
  background-size: 100% 100% ;
}

or

body {
  background-size: cover;
}

answered Mar 27 '18 at 00:09

Taki

17,320
4
26
47

score 2 · Answer 2 · answered Mar 27 '18 at 00:09

2

Use background-repeat: none and background-size: cover

answered Mar 27 '18 at 00:09

Johannes

64,305
18
73
130

score 1 · Answer 3 · answered Mar 27 '18 at 00:09

1

Try to use background-size: cover; as described in this article: https://css-tricks.com/perfect-full-page-background-image/

It will make the image stretch to fill the available space and scale accordingly to the size of its container.

Let me know how it goes :)

answered Mar 27 '18 at 00:09

Adriano

3,788
5
32
53

It works, but at first, I forgot to add a semicolon. This helps! – Brandaboss Mar 27 '18 at 00:15

score 1 · Answer 4 · answered Mar 27 '18 at 00:09

You can use the following to make it fit:

background-size:cover; Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

background-size:contain; Resize the background image to make sure the image is fully visible

So it does not repeat: background-repeat: no-repeat;

https://www.w3schools.com/cssref/css3_pr_background-size.asp

How do I make my background-image fit the entire screen CSS

4 Answers4