1

I want my background-image to follow the shape of its element. Like if I set my element's clip-path to: clip-path: polygon(0 0, 50% 10%, 50% 90%, 0% 100%); I want the background-image to change its size and aspect-ratio to match the element's clip-path.

Everything I try crops the background image instead of reshaping, stretching or squeezing it..

ninadepina
  • 661
  • 2
  • 12
Merwin
  • 9
  • 3
  • Maybe I misinterpret what you want, but `clip-path` is nothing more than a property that cuts/obfuscates parts of an element. Comparable to using a pair of scissors and cut a shape out of a piece of paper, therefore a `background` does not *follow* a `clip-path`, it gets *cut*. Please post a [reprex] so people can see what you have been trying... – Rene van der Lende Dec 28 '22 at 13:08

1 Answers1

1

You may use background-size and eventually set some coordonates of your clip-path into css var() so it can be used by background-size:

here an example from your clip-path

html {
  background:green;
  --clipRight: 50%;/* value setting how far from left you clip the element */
}
body {
  margin:0;
  min-height:100vh;/* min-height because demo has no content to fill and stretch body */
  clip-path: polygon(0 0, var(--clipRight) 10%, var(--clipRight) 90%, 0% 100%); 
  background:url(https://dummyimage.com/300)  0 0 / var(--clipRight) 100% no-repeat yellow;
}

Note that you might also need to set a different background to html and body to be sure your resized image is drawn on body and not transfered and drawn on html.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129