cssbackgroundpngresponsiveclip

Biscuit pattern like

just started to get my head around the clip property in CSS.

I am working on a website for a biscuit factory and I want to make it responsive. My problem is that I came across a section from the site where I can't just use the good old png background because of responsive problems.

So, my question is, how do you manage to get this pattern (clipping, maybe) going on in CSS and not by using png transparency.

Background image clipped by some sort of pattern

.home .section-4 { 
        background-image:url('../images/backgrounds/tales.png'); 
        background-size:cover; 
}

I've tried using pseudo elements, but without luck.

Solution

  • If you simply use radial-gradient (from transparent to whatever color is your background) in a pseudo element you can achieve a solid result.

    .wave{
  height: 60px;
  position: relative;
  background-image:url('https://placehold.co/350x60'); 
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 10px;
  background-size: 20px 20px;
  background-image:
    radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
    <div class='wave'></div>