Make cropped image responsive in CSS

Question

Info: I have a cropped image used as a background image for the top of my webpage. In CSS I've defined in px the size of a div containing the image - which is cropping the image. (I'm doing this in Squarespace). So when you enter the page you see the background image (and some text) filling the screen and you then scroll down past the image.

The problem: when I reduce the size of the web browser window the div, of course, maintains the same px height. This means the image ends up being background for most of the page - I just want it to be on the top when you enter the page.

The question: how do I make the cropping div responsive in height? As far as I have researched I can only set the value in px which isn't responsive-friendly... The following code is based on my external screen size. So I need that height px for large screens.

My 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')

I only want the image to be not distorted. But it doesn't matter how much or how little you see of the image. — Andy S
– Andy S, Commented Apr 20, 2020 at 6:15

madi.wd · Accepted Answer · 2020-04-17 14:44:58Z

0

Give it to a free height that takes up the higher space only height:auto

answered Apr 17, 2020 at 14:44

madi.wd

1461 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andy S Over a year ago

Can you write more explicitly what my code then would be?

Collectives™ on Stack Overflow

Make cropped image responsive in CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related