Hero Section: Section smaller than image? How to fix?

How To
1

This is probably a very dumb question, but I am new to building websites and CSS and such so please bear with me.

Why is my section not stretching to fit the image that it contains? As a result, the container seems to remain only as big as the section.

I am depending on the section being as tall as the image, responsively, in order to properly position the various elements in the container.

Only changes made:
Image:

  • Position = Absolute
  • Min. width = 100%
  • Object fit = Cover

Any help or insight would be appreciated.

Note: I cannot link you the site, unfortuately, as it is locally hosted.

image
image1610×758 81.4 KB

2

Try
position:absolute *you did it.
top:0;
left:0;
right:0;
bottom:0;

Instead of min-width.

3

I just made that change, but unfortunately, no luck :frowning:

Thank you for responding though!

4

The section change to position relative and see?

6

I tried that as well and no dice :confused:

7

This is what I set for my hero image.

image
image1920×1080 444 KB

It does well.

8

Hmm, I’m not sure why it’s not working for me. I must be doing something really silly.

Maybe I need to come back to this tomorrow with fresh eyes. Thank you so much for taking the time. :slight_smile:

9

If your site is online, feel free to share the URL, so I try to see if it works fine here.

10

It’s currently locally hosted but I will move it online tomorrow and add a link here. Thank you!

1 Like
11

You probably forgot to set section’s position to relative.

12

He said that he tried.

13

Ok. Then he needs to set the section position relative and image position not set and container position to absolute (with right, left, top and bottom to 0).
This way, the section would be at least as tall as the image. And he can change width and height of image in different breakpoints as he likes.