How do I put the background on the full screen, CSS?

Asked

Viewed 2,967 times

2

The image does not take the whole screen, I tried to put width and height, but continued the same way the image appears on the page.

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title> Vidas Secas </title>
<link rel="shortcut icon" href="3.jpg">
</head>
<body>
</body>
</html>

CSS

body {
    background-image: url(1.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
html css

  • How large is the image? Since it is in CSS no-repeat? Width and height do not work with background

4 answers

2

This happens because you are setting the value no-repeat on the property background-repeat, exchange the value for repeat

body {
  background-image: url(https://www.gravatar.com/avatar/6a5ce13734910d828649760622ac35e5?s=32&d=identicon&r=PG);
  background-repeat: repeat;
  width: 100%;
  height: 100%;
}

2

Your CSS is almost right. Missing to use property background-size to define how the background will occupy the space. Vc can still use the background-position if you want to centralize the background in the middle of the element where it is set.

See how it looks with the background occupying the body entire, but without repeating the image:

body {
    background-image: url(https://placecage.com/300/300);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
}

1

The estate background has a number of options to be defined, such as background-position, background-repeat and one that can help you, if you don’t want the image to keep repeating in your element but still occupy the whole screen, would be the property background-size, with her you can define as background-position: cover which will occupy the entire element in question.

0

You can use background-size: 100%.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.