Make Div Mask Background Image to Match Parent Background Image

Question

I am trying to accomplish an effect where it looks like the "container" div is inverting the background image of the "parent" div. From my research I can't seem to find a way other than the "parent" and the "container" being the same size with different backgrounds, and the "content" div masking the "container" div. Here is an image of what I would like it to look like.

Here is my HTML:

<div class="parent">
  <div class="container">
    <div class="content">
    </div>
  </div>
</div>

The "parent" div has a normal background, while the "container" div (same size as "parent") has an inverted version of the "parent" background (inverted via thrid party program, I am not trying to invert it via css).

My question is, what CSS do I need to apply to the "content" and "container" div to achieve a mask where the "container" div's background is only shown through the "content" div?

Possible duplicate of [invert color using css](https://stackoverflow.com/questions/17741629/invert-color-using-css) — Obsidian Age, Oct 05 '18 at 01:09

Temani Afif · Accepted Answer · 2018-10-05T01:21:49.617

An idea is to play with background-clip and adjust padding to control how much background you will show from the inner container:

.container {
  height: 300px;
  background: url(https://picsum.photos/1000/800?image=1069) center/cover;
}

.content {
  height: 100%;
  background: url(https://picsum.photos/g/1000/800?image=1069) center/cover;
  background-clip: content-box;
  padding: 100px calc(100% - 300px) 100px 50px;
  box-sizing: border-box;
}

<div class="container">
  <div class="content">
    Some text
  </div>
</div>

This can also be done with one container and multiple backgrounds:

.container {
 height:300px;
 background:
    url(https://picsum.photos/g/1000/800?image=1069) center/cover,
    url(https://picsum.photos/1000/800?image=1069) center/cover;
  background-clip:
    content-box,
    padding-box;
  padding:100px calc(100% - 300px) 100px 50px;
  box-sizing:border-box;
}

<div class="container">
    Some text
</div>

score 0 · Answer 2 · answered Feb 25 '19 at 12:49

You could use mix-blend-mode though it will affect any contents of the .content div.

.container {
  height: 300px;
  background: url(https://picsum.photos/1000/800?image2045) center/cover;
  padding: 50px;
}

.content {
  width: 220px;
  height: 180px;
  background: white;
  mix-blend-mode: difference;
  box-sizing: border-box;
}

<div class="container">
  <div class="content"></div>
</div>

Make Div Mask Background Image to Match Parent Background Image

2 Answers2