I'm currently working on a page with a background image, and I want to add a color block behind all my content while still allowing the background image to be visible in the margins.
How can I make sure that the color block extends from the top to the bottom of the page?
To achieve this layout, I have enclosed all my content in a <div>
tag, except for the logo image in the corner:
<head>
<meta charset="utf-8">
<title>Services</title>
<link href="Coppermug Stylesheet Services.css" rel="stylesheet" type="text/css">
</head>
<div>
<a class="home-logo" href="EXAMPLE.html"><img src="EXAMPLE" id=bannerlogo></a>
</div>
<div class="white-background">
<div class="navbar" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="EXAMPLE.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="EXAMPLE.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="EXAMPLE.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="EXAMPLE.html">Contact</a>
</li>
</div>
</div>
html {
background-image: url("../Final Logo Assets/Minimized/Blur Mug-min Opacity-min.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.white-background {
background-color: #FFFFFF;
margin-right: 20%;
margin-left: 20%;
}