Negative mask in CSS within the background image

Question

I want to create a mask in css using png file but in a different way. Basically I don't want the mask to display the content underneath but I want it to CUT the content underneath and display everything else. So like negative mask. The important fact is that I want to mask the background image. Here is what I want to do::

I have 3 layers here. The first one is a video (html), then dotted background made as a repetitive background (CSS background) then a mask - needs to be png image as this will be the logo. I want the mask to remove the background underneath it and display the video.

.cont {
  width: 100%;
  height: 450px;
  position: relative;
  background: url("http://www.kamiennadlyna.pl/test/img/video-bg.jpg") no-repeat center;
}

.maska {
  width: 100%;
  height: 100%;
  background: url("http://www.kamiennadlyna.pl/test/img/mask.png") repeat;
  left: 0;
  bottom: 0;
  position: absolute;
  text-align: center;
  /*-webkit-mask-image: url("https://www.tucado.com/images/logo.png")*/
}

<div class="cont">

  <video autoplay muted loop id="myVideo">
          <source src="http://www.kamiennadlyna.pl/video.mp4" type="video/mp4" poster="http://www.kamiennadlyna.pl/test/img/video-bg.jpg">
        </video>

  <div class="maska">
  </div>

</div>

jsfiddle

Temani Afif · Accepted Answer · 2020-03-23T14:29:26.863

New Answer

Based on the update you can do the following. The idea is to consider an inverted version of your logo where you make the transparent part non-transparent (and the non-transparent part transparent) then you apply multiple mask layer to get what you want.

I kept the same idea from the old answer. I am considering the logo at the center of the overlay:

.overlay {
  --h:200px; /* height of the logo*/
  --w:200px; /* width of the logo */

  height:300px;
  background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;
 
  -webkit-mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50.1% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50.1% - var(--w)/2) 100%,
      url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);
  mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
      url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}

<div class="overlay"></div>

Here is a related question to explain how to obtain a new version of the logo: https://graphicdesign.stackexchange.com/q/63635

We can also play with mask-composite and keep the original logo and it would be easier to adjust and change the position. Pay attention to the order of mask layers which is important here unlike the first example:

.overlay {

  height:300px;
  background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;

  -webkit-mask:
      linear-gradient(#fff,#fff),
      url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:source-out;
  mask:
      linear-gradient(#fff,#fff),
      url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;
  mask-repeat:no-repeat;
  mask-composite:exclude;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}

<div class="overlay"></div>

Old answer

I would build this with pure CSS without the need of images:

.overlay {
  height:300px;
  /* the stripes */
  background:repeating-linear-gradient(to right,blue 0 10px,transparent 10px 20px);
  /* the mask*/
  -webkit-mask:
      linear-gradient(#fff,#fff) top   /100% 50px,
      linear-gradient(#fff,#fff) bottom/100% 50px,
      linear-gradient( 235deg,transparent 10%,#fff 9%) calc(50% - 600px) 50%/1200px calc(100% - 100px),
      linear-gradient(-235deg,transparent 10%,#fff 9%) calc(50% + 600px) 50%/1200px calc(100% - 100px);
  -webkit-mask-repeat:no-repeat;
  mask:
      linear-gradient(#fff,#fff) top   /100% 50px,
      linear-gradient(#fff,#fff) bottom/100% 50px,
      linear-gradient( 235deg,transparent 10%,#fff 9%) calc(50% - 600px) 50%/1200px calc(100% - 100px),
      linear-gradient(-235deg,transparent 10%,#fff 9%) calc(50% + 600px) 50%/1200px calc(100% - 100px);
  mask-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}

<div class="overlay"></div>

To understand the puzzle here is the gradient used for the mask with different coloration:

.overlay {
  height:300px;
  background:
      linear-gradient(blue,blue) top   /100% 50px,
      linear-gradient(red,red)   bottom/100% 50px,
      linear-gradient( 235deg,transparent 10%,green  9%) 
         calc(50% - 600px)   50%  /    1200px calc(100% - 100px),
         /*          ^ this half of this ^ */
      linear-gradient(-235deg,transparent 10%,purple 9%) 
         calc(50% + 600px) 50%/1200px calc(100% - 100px);
  background-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}

<div class="overlay"></div>

Here is another syntax where I will be using CSS variables to easily control the triangle:

.overlay {
  --h:200px; /* height of the triangle*/
  --w:200px; /* width of the triangle */

  height:300px;
  /* the stripes */
  background:repeating-linear-gradient(to right,blue 0 10px,transparent 10px 20px);
  /* the mask*/
  -webkit-mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
      linear-gradient(to top right,#fff 49%,transparent 50%) calc(50% - var(--w)/4) 50%/calc(var(--w)/2) var(--h),
      linear-gradient(to top left ,#fff 49%,transparent 50%) calc(50% + var(--w)/4) 50%/calc(var(--w)/2) var(--h);
  -webkit-mask-repeat:no-repeat;
  mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
      linear-gradient(to top right,#fff 49%,transparent 50%) calc(50% - var(--w)/4) 50%/calc(var(--w)/2) var(--h),
      linear-gradient(to top left ,#fff 49%,transparent 50%) calc(50% + var(--w)/4) 50%/calc(var(--w)/2) var(--h);
  mask-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}

<div class="overlay"></div>

Thank you Temani, I have made a mistake explaining this as a striped background. I have a different background to cut off, but for the example I used the stripes. Is there a way to do it using images? I will update my question for better understanding. — Piotr Ciszewski, Mar 17 '20 at 21:45
@PiotrCiszewski it's still the same, simply replace the repeating-gradient with an image and the mask will do the same — Temani Afif, Mar 17 '20 at 21:45
thanks. I'm sorry you've done so much work on this. The triangle was an example too. The idea is to put the logo which will cut off the background. I have updated the question again. That's why it needs to be png image. I get the idea of your solution. — Piotr Ciszewski, Mar 17 '20 at 21:53
@PiotrCiszewski now people will think I am crazy when looking to my answer and your *new* question :) ... will edit to match your requirement — Temani Afif, Mar 17 '20 at 22:00
thanks, I have done the "inverted image" so it covers everything but the area, but I thought there is an easier way to do it by applying the actual logo. I have also used the big background image with cut off the logo area instead of masking. Thanks for help. — Piotr Ciszewski, Mar 18 '20 at 06:48
I have replaced the mask image and it stopped working... https://jsfiddle.net/tucado/L8pxhe4t/3/ it's weird — Piotr Ciszewski, Mar 18 '20 at 06:59
@PiotrCiszewski there is a security issue with Mask when using images, not all of them will work. Upload your image here: https://fr.imgbb.com/ and it will work. We also face the same issue here in SO. I made a meta question for this: https://meta.stackoverflow.com/q/394277/8620333 — Temani Afif, Mar 18 '20 at 09:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/209935/discussion-between-piotr-ciszewski-and-temani-afif). — Piotr Ciszewski, Mar 19 '20 at 16:24

Negative mask in CSS within the background image

1 Answers1