After spending hours scouring forums, I still haven't been able to solve this issue.
I am trying to make one of my divs serve as the background for my entire website. Additionally, I want it to start from a specific point and not cover the entire page.
This particular div (with the class name the_background) is nested inside my container div, which in turn is a child of the body tag, set up like this:
(Standard head content here)
<body>
<div class="container">
<div class="header">
<img src="images/open-access/header.png">
</div>
<br/>
<div class="signout">
login name | <a href="#">signout</a>
</div>
<div class="menu">
<ul>
<li><a href="#">Bunch of links etc.</a></li>
</ul>
<div class="under_menu">
</div>
</div>
<div class="welcome">
Welcome, name!
</div>
<div class="the_background"></div>
More HTML content...
Here is a snippet of my external stylesheet code:
.container {margin:0 2em;
text-align: center;
position: relative;}
.under_menu{background-color: rgb(141, 0, 212);
width:auto;
height: 1em;
padding-bottom: 0;}
.the_background{background-color: yellow;
background-image: url('images/bg.png');
width: auto;
height: 100%;
background-size: cover;
z-index: -10;
position: absolute;
left: 0;}
Continued code snippets...
My ultimate goal is to have the background image start at the bottom of the under_menu div, match its width, and extend throughout the rest of the page length. However, with the current code setup, I don't see any results. What could be causing this issue? I've tried adjusting various properties countless times but to no avail. Any assistance would be highly appreciated along with an explanation of why the posted code isn't functioning correctly.
Thank you very much for your anticipated help!
p.s. Yes, I've meticulously checked spelling and syntax multiple times. :/