body{
background-image: url("web.png");
background-repeat: no-repeat;
width: 100%;
}
This is the code i tried, but it is not working and i also tried to use screen width as default width for the entire image.
CodePudding user response:
You can set the background size by using background-size
property. In case of covering the whole page please use background-size: cover;
.
body {
background-image: url("https://picsum.photos/1080/1920");
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Your content here -->
</body>
</html>
CodePudding user response:
To set the image as asked, you have to use background-size along with its attributes (try these three and then select the one suitable for you)
body{
background-image: url("webp.png");
background-size: 100% 100%; /* used to set the image to fit 100% of the screen's width and height*/
}
body{
background-image: url("web.png");/* To cover the screen */
background-repeat: no-repeat;
background-size: cover;
}
body{
background-image: url("web.png");/*contains the image within the screen with with proper scale of the image*/
background-repeat: no-repeat;
background-size: contain;
}