Good day everyone!
I apologize in advance if my explanation is not very clear. Below is my code along with a link to an image that will help illustrate the issue I am facing. Here is the code snippet:
<header>
<div>
<a href="index.html"><img src="../images/columns.png" alt="columns">`</a>`
<h2>The Compendium</h2>
<h3>Of Greek Mythology</h3>
</div>
The CSS
header {
position: relative;
background-image: url(../images/1024px-Raffaello,_concilio_degli_dei_02.jpg)
}
header div{
background-color: rgba(255,255,255,0.80)
}
header img {
height: 100px;
float: left;
margin-left: 2em;
margin-bottom: 1em;
margin-top: 1em
}
header h2 {
position: relative;
padding-top: 1em;
padding-left: 7.5em;
font-size: 170%
}
header h3 {
font-size: 120%;
padding-left: 7.5em;
}
Link to the image:
Essentially, I am trying to set a background image for my header with a white transparent overlay so that the black text is visible. The issue I am facing is with the positioning of the column logo, as it interferes with the white transparent background. If anyone has an alternative solution for positioning the logo while keeping the text visible, I would greatly appreciate the advice.