My text has a white background with an opacity of .3, but it's affecting the foreground due to CSS repositioning. Even though the HTML is in a different division, I struggle with certain aspects of CSS and would appreciate guidance from those more experienced.
The relevant part of the HTML is:
...
<p><span>Fri</span><span>When Announced</span></p>
<p><span>Sat</span><span>Open</span></p>
</div>
<div class=...
<img src="img/cross.png" alt="Cross" width="340" height="465"/>
</div>
<div id="bkgrnd"></div>
<div id="clear"></div>
</section>
...
The CSS code is as follows:
#bkgrnd{
background-color:#fff;
border:1px solid #000;
box-shadow:#332315 .3em .4em .2em;
opacity: 0.3;
width:750px;
height:526px;
margin-left:89px;
margin-top:-55px;
z-index:-2;
}