Best practice for Hero Image Behind/Below Text
As seen in the Figma image, I'm trying to make a hero page with a responsive image based on screen size. I currently have this set as a background image set to contain but end up having to create a lot of padding to bring the image up and down correctly. Is there potentially a better way to do this? At certain viewports, the image overlaps the text pretty badly.
25 Replies
How would you tackle this hero image?
I'd use a grid stack personally
Interesting. So grid together the h1, p, and button in first column and image in 2nd column? And then at smaller screens, pop the image down to the second row?
basically yup! that will allow you to control the flow well and also the overlays like with happening now too (though the happening now looks like a popup xD).
You just end up with a lot of control with grid/stacking
So I could do like gridTemplateColumns: '360px 1fr'. How would the height of the image be set?
have it fill the 1fr? (oh sorry miss read) You could set a max-height
Yeah, I haven't even thought about the happening now button yet. That seems to be floating over things? lol
right but that is why you stack it
Maybe relative / absolute bottom 0 right 0?
nana
Sarah Drasner
CSS-Tricks
How to Stack Elements in CSS | CSS-Tricks
If you want to create fantastic and unique visual experiences on the web, you will eventually need two elements to overlap or exist in the same place. You may
So parent is relative, child is absolute and positioned specifically.
na you want the image and the hgroup to be able to push against each other
Oh right, it is kind of overlapping a bit in the Figma.
That's what made it seem a bit complicated to me for using grid.
@b1mind https://codepen.io/Tan-Nguyen-TRUEfoe/pen/PoLRPxB Something like this?
really close it looks like you might want some more grid lines so you can overflow the heading in the desktop, then the button in mid
also just so you know you can use the absolute positioning or* because its a grid child still use its
That's for the third_box class?
yup
Oooh, end is bottom and right.
for place yes
its both justify and align
Got it.
So you were mentioning overlapping the second column over the first column.
more or less something like this
you would probably ungroup the p and button
and assign them col/row too maybe 🤔 sorry my brains all over atm.
I see.
I will play around with this a bit more. I really appreciate your time and help!
Yea sorry I'd help a bit more but just fried atm xD
Please share your solution when you do find one, would help others.