Why isn't my background img covering the entire page? - html

Question

I want my background image to cove the entire div but instead there are a lot of white space
HTML
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
CSS
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction{
height: 900px;
width: 100%;
}

Answer 1

Please use background-size:cover
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
background-size:cover;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>

Answer 2

If the white border bothers you around the background, use something like this:
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction {
height: 900px;
width: 100%;
}
body {
margin: 0;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
If the image is smaller than the screen, than use larger image. it is generally good practice to prepare that some people could have very very large resolution displays...
Or scale it up, like #ankitapatel mentioned: with background-size:cover;.

Answer 3

Use 2 things as suggested
body {
margin : 0px; //add this
}
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: fixed; //change fixed to cover entire
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>