how do I put the background in full screen, CSS?

Question

how do I put the background in full screen, CSS?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

0

The image does not take the entire screen, I've already 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

asked by anonymous 15.05.2018 / 21:26

4 answers

ERROR Parse error: syntax error, unexpected '' Decode string encoded by javascript in C #

score 1 · Answer 1

This happens because you are setting the value no-repeat to the background-repeat property, change the value to repeat

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

score 1 · Answer 2

Your CSS is almost right. We need to use the background-size property to set how the background will take up space. You can still use background-position if you want to center the background in the middle of the element where it is defined.

See how you get the background occupying the entire body, but without repeating the image:

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

Here is a didactic link with some practical examples and background properties explained easily link

score 1 · Answer 3

The background property has a number of options to set, such as background-position , background-repeat and one that can help you if you do not want the image to repeat itself in its element but even though it occupies the entire screen, it would be background-size , with which you can set it to background-position: cover that will occupy the entire element in question.

score 0 · Answer 4

0

You can use background-size: 100% .

15.05.2018 / 21:36