Seeking assistance in adjusting the header size to accommodate both the image and text content.
Attempts to modify the background size using the "background-size" property have been unsuccessful.
header {
background-color: red;
background-size: 200px 100px;
}
header h1 {
font-size: 50px;
text-align: center;
text-decoration-line: underline overline;
text-decoration-style: double;
position: relative;
margin-top: -100px;
margin-bottom: 100px;
}
header .pic {
border: 5px #000 outset;
border-radius: 50px;
}<header>
<img class="pic" src="" alt="" width="200px">
<h1>Placeholder Text</h1>
</header>The issue lies in the positioning of the header background, which currently stops at the midpoint of the text and image. The desired outcome is for the background to extend to the bottom of whichever element—text or image—is positioned lower.