Hey, you, who's reading this in the future: you can find out who I am today at https://rarf.zone/about/. 💙


E-mail me at:
info@rarf.zone
Mastodon/Fediverse
yiff.life/@katja
You must log in to comment.

in reply to @ronja's post:

I tried remaking the effect:

<div style="position: relative;">
<div style="background-image: url(https://www.nasa.gov/sites/default/files/styles/full_width/public/thumbnails/image/stsci-h-p2016a-m-2000x1374.png);  background-size: 100% 100%; background-repeat: no-repeat;background-attachment: fixed;overflow: hidden;height: 400px;width: 400px;"></div>
<div style="background-image: url(https://i.imgur.com/y3UhEIL.png); height: 400px; background-size: 400px; background-repeat: no-repeat; position: absolute; top: 0px; z-index: 1;width: 400px;"></div>
</div>

a wrapper element is used with position relative (cohost adds their own, but it has margins which youd need to account for, and i felt like future-proofing just in case those numbers ever changed in future cohost UI). inside of it, two divs each with a width and height of 400px (could be anything though). each has a background image specified. The first one has background-attachment set to fixed, and the background-size set to 100% 100%. it also has overflow set to hidden, to make the background image not bleed out of the element. The second one has absolute positioning, with top set to 0px, to make the div go to the top of that wrapper element we made with position relative. it has a z-index of 1, so that it appears on top of the first image, rather than behind it. the image has a white background but is transparent in the middle, so you can see through it in the center but it covers the space image on all the edges.

i really dont see how that could possibly be necessary, given you can always make a png file using the transparency as a mask? i guess im just not understanding what you are trying to do, id like to give whatever it is a try if i just understood :/ hard to explain though, thats fair

can't it?

  • background image, background-attatchment:fixed
  • foreground png mask using transparent pixels

i'm not sure what you're saying. maybe if you want two different background-attachment:fixed things nearby eachother, yeah that would take some effort and you'd have to hack it a bit

if you want to make a tear into an entirely different fixed background image with an irregular shape that nonetheless appears on top of the other, you need to mask the element itself, not just render an image with transparency.

layer 1. all the stuff you see above
layer 2. transparent png image of another tear in the page
layer 3. an element with a fixed background that is masked to the transparent "inside" of the hole, and thus only visible there