Hi there! I am using a cropped image as the background for the top of my webpage, with a fixed size defined in pixels for the containing div. The issue arises when I resize the browser window, causing the image to cover most of the page instead of just the top section where it's intended to be displayed initially.
My main concern is regarding how to make this cropping div responsive in terms of height as setting a fixed pixel value isn't ideal for different screen sizes. Currently, my code is tailored for larger screens but lacks responsiveness.
Below is a snippet of my existing code:
.header-background {
position: absolute;
top: -160px;
left: -335px;
right: -335px;
height: 850px;
z-index: -1;
overflow: hidden;
background-size: cover;
background-position: center;
background-image: img src('/s/Sams-sort.png');