How to layer a image underneath components in React NEXT.JS

Question

I'm trying to make a website and using this Canadian politicians site as a reference. I like how his navbar and join components layer on top of his picture, and how his picture is a fixed length and resizing the window resized the picture only a little bit based on the layered components but also keeps the aspect ratio correct and unstretched.

My first problem is I'm using NEXT.JS Image components and I can't figure out how to make it copy that behaviour of not stretching while maintaining a fixed size.

I'm a python boy I just got put on this project so my second problem is I made a nav bar component and am going to get around to the component in place of his join component, but I can't figure out how his website layers so nicely. In what direction should I look into. Thank You

Answer 1

This is more of a css issue than a NEXT.JS issue.

The key is to use an image as a background of a <div> tag (or any tag), rather than an <img> tag. Use the following properties

background-image: url('....');
background-position: center;
background-size: cover;
background-repeat: no-repeat;