Position FIXED Is Making My Images Overflow, Even With > overflow: hidden; - html

Question

This is the header, so it's all that I've written so far, but for some reason, my pictures are longer than my header.
The pic is from the lower part of the header where they overflow.
image of the overflow
<header>
<img id="bg-img" src="images/head-img.jpg" alt="bg">
<img id="logo" src="images/logo-black-bg.png" alt="logo">
</header>
header {
margin: 0;
height: 250px;
overflow: hidden;
background: #000;
position: relative;
}
#logo {
width: 18%;
max-height: 100%;
position: fixed;
top: 0;
right: 5%;
}
#bg-img {
width: 60%;
position: fixed;
top: 0;
left: 0;
}

Answer 1

I think you are confusing how position works, as your header is not actually useful for anything, as all elements contained within are positioned fixed, which means they take their width, height and position reference frame from the viewport and not your header element. I also do not understand why you would place a background image there if CSS provides a perfectly fine background property that can be controlled with much more ease.
For your purpose I would suggest something like the example below, but I would even go further and tell you that positioning your logo absolute is going to be a pain at some point - you add menus, text, etc... to your header and all of a sudden objects are behind your logo. In that case, a better solution might be a flexbox:
header {
display: flex;
justify-content: right;
align-items: stretch;
}
If you now add padding to your header, your logo will get it for free as well.
body {
height: 200vh;
}
header {
margin: 0;
width: 100%;
height: 25vh;
overflow: hidden;
background: #000;
position: fixed;
top: 0;
left: 0;
background: url('http://via.placeholder.com/300x200/444444');
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
#logo {
width: 18%;
max-height: 100%;
position: absolute;
top: 0;
right: 5%;
}
<header>
<img id="logo" src="http://via.placeholder.com/100x100" alt="logo">
</header>
I also adjusted your headers height, but only to ensure that it shows up correctly and you can visualise some scrolling and a fixed header.