🎨 Display the photo full screen and overlay the header and footer on top.

How about layering Headers and Footers over images to make your site look fancy?
Display the image at 100vh, 100vw. Overlay the Header and Footer elements there with position: relative;

HTML

<div>
  <div class="position-relative">
    <img class="img" src="https://picsum.photos/id/10/800/600">
  </div>
  <header class="bg position-absolute">Header</header>
  <footer class="bg position-absolute-bottom">Footer</footer>
</div>

Using sample photos from Lorem Picsum. I recommend this site because it is very convenient.

CSS

.bg {
  background-color: black;
  opacity: 0.4;
  color: white;
  width: 100%;
  padding: 16px;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
  top: 0;
  left: 0;
}

.position-absolute-bottom {
  position: absolute;
  bottom: 0;
}

.img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: 50% 35%;
  filter: brightness(80%);
}

Output

https://codepen.io/masanos/pen/qBKvRMJ?editors=1100