Masking divs to a background image of its container?
Hi everyone! I have been racking my brain trying to figure out a way to implement this. I know of masking but I am not sure at all how to even begin something like this. I tried playing around with code pens that I have found using keywords but I have had no luck trying to achieve what I am looking to do. This is just a concept idea, but I figure a visual would help.
I attached two images to this that capture exactly what I am trying to do. I wish I had code already but I have no idea. I threw this together in photoshop with the initial blue boxes representing the four child elements. The second image just shows that only the background shows for the children elements, and it is ideally fixed to that background so they aren't all taking on that background.
My thought is the child elements are transparent background, so they show the parent element's background, but the parent background only displays where those elements are in the viewport, similar to how text masking is, but for divs.
23 Replies
Will the square divs contain content? Should it be responsive breaking to new lines or scale to fit
Yeah, they'll have some h3 and p elements, all containing stats.
I have them currently as flex, so they would be flex-direction: column on smaller screens.
But I can adapt the code anyway to achieve this. I just have no idea how to mask divs. I tried translating it from what I know about text, like havin ga background over text and masking it so the letters are the background image instead, but none of what I tried worked last night and I got frustrated and deleted the code from the page I am working on
I'm trying to pull the code that's relevant that I already have from the page. It's a small element in a larger one, but I'll share them once I can so you can see what I already have.
yea, i think it's gonna be difficult with css alone. I can't think of a native css masking solution with the divs
I think we'll need some javascript
for example to have the image in a background layer and apply maskimages (rectangles) to it that mirror the sizes and positions of the divs on top
That sounds like fun! I’ve never done something like that before, so I’m eager to learn something like that.
I was wondering if there is a way to nest a div inside a maskimage rectangle, give it an absolute positioning so that it covers the entire masked rectangle, and then apply the theory of what I’m looking to do to the mask rectangles that show the background image of the container (like the mountains in the example).
this is what I came up with
hey might be missing something here but isn't this just
background-attachment: fixed;??no, the background may only show up on where the divs are
o wait, Am i that dumb? Somehow i tought background attachement fixed was relative to the element itself.... what a brainfart
20 years.... 😠I used it so many times
<:cat_alwaysgetsban:1171564990076027011>
omg
I feel silly
This whole time I was focusing on the parent element and I even had it fixed to that lmao
Thanks for your help you guys! 🙂
although, when it is fixed, it is fixed to the window. not to the container. so there might be more cutoff then wanted.
and it won't scroll along. so depends on what you want
I think your pen is exactly the kind of thing that I was looking to do for this purpose, but I really wasn't aware background-attachment was something I could do to a class within a parent element and have it act as though it was attached to the entire display, I thought it would be relative to the element it is assigned to
yea, i used it before on a single element, and it does exactly what i think it should do. but never thought of adding it to multiple
why is the event listner resize?
because if you resize the window, the positions of the divs can change, so the mask images have to adjust to that
resize is also an event that happens on load?
no, thats why i call the function seperatly too
oh I see now!
Thank you! 🙂
no problem. good luck with the project!
Use mix blend mode instead of a mask if you want to enable this to work with containers that resize automatically to the contents without using any JS.
https://codepen.io/chooking/pen/abXWXrp
nice, thought of that too, but that will set a white background color for the hidden parts
got it!!!
trick is to give each child a pseudo element with the background and positioned absolute, relative to the container
and then with a clip-path on the childs hide the excess
https://codepen.io/MarkBoots/pen/LYqyaJB
<a:DES_dankCheer:868406372587425803>