Define Relative Parent Div Height Using Absolute Child

Design help Layout & Design
1

I have a section that is supposed to have an image as the background and then some press links on top of it. The background image should scale with it’s curvature, so I can’t use the background-image property as it starts clipping on larger screens.

So I have a parent div positioned as relative and the image block as absolute - the tricky part is that I want to vertically align the press links within the image, but I’m struggling with how to define the height of the relative parent to be equal to height of the child. I’ve seen something on StackOverflow that I can be done using grid but couldn’t sort it.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hello,

Maybee the image should be a background image of a flex container that aling everithing in the horizontal center of it. No need to use absolute here.

3

The issue with that is that I can’t align the content on top of the image vertically relative to the image.