Biscuit pattern like

Question

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.

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

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

Can you explain what responsive problems you are having, and how you want it to behave instead? Use [JSFiddle](https://jsfiddle.net/) to illustrate the problem. — user500665, Aug 12 '16 at 07:44
Similar question (with solid color though, no image) http://stackoverflow.com/questions/25895895/creating-a-droplet-like-border-effect-in-css/25903879#25903879 — Theodore K., Aug 12 '16 at 08:02

score 0 · Accepted Answer · answered Aug 12 '16 at 07:56

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('http://placehold.it/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>

Biscuit pattern like

1 Answers1