I'm trying to show a background image using CSS, but the image does not display. I am doing the exact same thing as the w3schools.com, but it does not work.
How do I show a background image for the entire page?
div {
background-image: url('https://imgur.com/a/Fql6rTU');
background-repeat: no-repeat;
}<div>
</div>1.When you are displaying an image in a division use background-size: cover so thaat image covers the division fully and then try to mention the height and width of the division.
2.You have given the wrong URL for the image and correct it and it will work. Hope this is what you are looking for
div {
height: 100vh;
width: 100vw;
background-image: url('https://i.imgur.com/kkQFh8p.jpg');
background-size: cover;
background-repeat: no-repeat;
}<div>
</div>You are using an IMGUR page URL instead of actual image URL - open the page, right-click the image, and pick "copy image link" (also shown separately after uploading)
body {
background-image: url(https://i.imgur.com/kkQFh8p.jpg);
background-repeat: no-repeat;
background-position: center;
} background-image url parameter need to be with image format extension, you need to change it on https://i.sstatic.net/ejeSN.jpg
You have to put there height with for that div which is with background image
div{
background:#006;padding:50px 0; background:url(https://www.nationalgeographic.com/content/dam/travel/rights-exempt/2018-travel-photographer-of-the-year/magical-mountains/dawn-vestrahorn-iceland-mountains.jpg); background-size:cover;
width:100%;
height:500px;
}<div></div>Hope so this will help you Thanks.
