0

My aim is to achieve a background like this. In easy words, I want to overlay / mask the white background svg over the plants' image. But as you see that the top of white background has an effect like when you tear a paper, is it possible to create such an effect using SVG or CSS?

Sample Aim

Skully
  • 2,882
  • 3
  • 20
  • 31
Laura
  • 675
  • 10
  • 32
  • 1
    That's not a pattern. – Dai Feb 03 '22 at 00:13
  • @Dai sorry for the word. Can you give me any idea to achieve this? Specially with css? – Laura Feb 03 '22 at 00:13
  • I would use two images here: 1) a rectangular `.jpg` of the plant and 2) a plain white `.png`, the same size as the `.jpg`, with three straight sides and a jagged pseudo-top-edge (above which is only alpha transparency). Then use CSS `background-image` with multiple values, so that 2) sits above (and partially obscures) 1). – Rounin Feb 03 '22 at 00:41
  • If you convert your image to png format, you can erase part of its contents and make that part transparent.. – Johannes Feb 03 '22 at 00:44

0 Answers0