How to set header background to fit appropriately - html

Question

Need help setting the header size so that accommodate the image and text.
I've tried changing the background size using the "background-size" property but it doesn't change.
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 header background appears until the middle of the text and image when I want it to be on the bottom of the text and image (whichever is lower).

Answer 1

try this :
header {
background: url("img/index.jpg") ;
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 #000000 outset;
border-radius: 50px;
}
<header>
<h1>Placeholder Text</h1>
</header>

Answer 2

When you want a background image in a container you do something like this:
header {
background-image: url('https://picsum.photos/800/400');
background-size: cover;
background-repeat: no-repeat;
height:100vh;
width: 100vw;
}
h1 {
color: black;
font-size: 50px;
text-align: center;
}
Instead of using a normal image tag, you declare you background image in the CSS.
See a working example here: https://codepen.io/Angel-SG/pen/dwOEvy

Answer 3

I think you might be looking for the display: flex
Try this
/* Reset
*******************/
* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; }
/* Styles
*******************/
header { background-color: red; display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
header .pic { width: 200px; }
header h1 {
font-size: 50px;
text-align: center;
text-decoration-line: underline overline;
text-decoration-style: double;
position: relative;
}
<header>
<img class="pic" src="https://sg.fiverrcdn.com/photos/105746482/original/3e2a4ad867ed23117cfda223391c35ab42bb99fc.png">
<h1>Placeholder Text</h1>
</header>