When I resize the webpage window, my background image shrinks in size. Currently, it is not repeating (which is a step forward), but now I need it to cover the entire screen to avoid showing white space around the background when the window gets smaller.
body {
margin: 0;
padding: 0;
background-color #333;
}
/*---Background Image---*/
body.home {
background-image: URL("http://www.freepngimg.com/download/home/2-2-home-png-file.png");
background-size: 100%;
background-repeat: no-repeat;
` background-color: #333;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}<body class="home">
<section class="Navbar">
<div>
<header>
<div>
<a class="logo" href="Index.html">
<img src="http://e-2103.jp/images/bt_nav_area_search.jpg" height="57.6px" width="190px">
</a>
<ul>
<li><a class="active" href="Index.html">HOME</a></li>
</ul>
</div>
</header>
</div>
</section>