Decorative image that adapts to the screen size?
Hi there. I'm working on a design where the hero image has a decorative element that should span the entire page. What would be the best way to accomplish this? I tried playing around with using a background-image with repeat on but that didn't look natural at all - atleast the way I did it.
I instead tried using absolute positioning but I cant' figure out how to make the decorative element scale without distorting. Any suggestions?
I've set up a code-pen with an image that has a width of 90%, this should be able to simulate different monitors 🤓 https://codepen.io/markus-b/pen/VwxdYOB
23 Replies
I think you were right. I'm also thinking about
position: absolute. The problem now is to position it correctly
I'll play around with the penhttps://codepen.io/IQmuneer/pen/LYmrVjX
you just need the make the the flow of color a different layer
Welp somebody else also got it. Here's my attempt tho
https://codepen.io/Sinc02/pen/qBYKdXJ
But overall same idea.
position: absolute is one way to go
Adjust the width according to your need but make sure to have height: auto. That will not "ruin" the imageusing grid https://codepen.io/MannixMD/pen/XWqYbQP
Ohhh my, thanks all for your help @sinc02 @iqmuneer @mannix_ 😄 ! I think I'll go with the grid-idea, checking if I can make it work as I want in my template 🤓
dam the grid idea is way better
Ah, I can't get it to work on my site! The background image seems to rely on the height of the img - and with the height I want (around 350-400px) it just barely shows.
Anyone understands why? I pushed it to a live-site, you can uncomment the 2000px height for the figure (which works as a wrapper for the image) and it should show how it should work.
a link to said website?
Yikes, my bad @mannix_ https://test.samuraj.oderland.agency/att-leva-med-hjartfel/
add
justify-content:center; on .hero-image__wrapper>divThen the decorative element seems to be contained within the image
well then w/o distorting the decorative image you would need to change cover to contain so the image will repeat
Oh, this could do it. I just need to get a different image
Thank you @mannix_ !
w8
i think i found something
ohh
try
background-position: center; background-repeat: no-repeat;Didn't seem to change anything. I applied it to the live site
oh remove the background-size
Hmm.. it now overflows - a little.
this is the best you can do w/o repeating the image or distorting it
Yea I figured. Gonna have to find another approach I think. I'll save it for later 🙂 Thank you so much for giving me a hand!
