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.
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.
