CODEWITHSUNDEEP
cssreactjssvg
faraz
faraz

Reputation: 2733

how to provide own image to svg for background?

I am building a react app and there's a portion where I need to make a slanted div that also has a background image.

the shape is like the blue div shown here - slanted div shape Now, i could have done as shown in the image i linked to, but since there's a background image, i am unable to use that as i would have to use it in 2 divs.

so, i want to use svg to create the shape along with the background and then have other things like text in that div. so, what should I do then to make that happen.

here's what I was trying but I am unable to show the background image and the slant at the same time. just wanted to add that this svg is inside a grid like this. it's a material ui grid for layout. I want this image to take the whole space of this grid as the background image that is. and I'd write text on this grid like i normally would.

     <Grid container > 

<Grid item xs={12} sm={12} md={12} lg={12} className='mscbackground' > 

<h2> asfasfdasdfasfdasfd <span className='blueword'> ASDFASDFASDF</span> </h2> 
JLSAKSJFDKLAJSLKDFJALKSJFDKLAJSLKFDJALKSJFDLKJLKSDJFLKJALKSDJFLKAJSDLKFJALKSJDFKLAJSLDKFJaksjdflkajsldfkjalkdfjslakjdslkfjalksdjflkasjdfkljalskdjflkasjdflkjalksdjflkasjdlkjflkasdjflkajsdlkfjalksdjflkasjdlfkj 


</Grid> 



</Grid>

and in css I have used

.mscbackground {
    height: 450px;
    padding-top: 50px;
    padding-left: 50px;
    line-height: 2.5;
    text-align: center;
    color: #D9D9D9;  
    width:100%;
    background:
     linear-gradient(to bottom right,transparent 49%,#fff 50%) bottom/100% 7% no-repeat,
     url('./assets/black-and-white-music-headphones-life.jpg')center/cover no-repeat;
  }

but it's not working. the background image isnt showing at all.

so, any ideas how to make this work??

Upvotes: 0

Views: 68

Answers (1)

Temani Afif
Temani Afif

Reputation: 272901

You cannot add background to path. Using SVG you can consider clip-path like below:

svg {
  width:200px;
}
<svg viewbox="0 0 300 200">
  <defs>
    <clipPath id="circle"> 
       <polygon points="0,0 300,0 300,100 0,200" fill="white" />
    </clipPath>
  </defs>
<image width="300" height="200" xlink:href="https://picsum.photos/300/200?image=0" clip-path="url(#circle)"/>
</svg>

In case you don't need transparency here is an easy solution with CSS:

.box {
  height:200px;
  width:300px;
  background:
   linear-gradient(to bottom right,transparent 49%,#fff 50%) bottom/100% 40% no-repeat,
   url(https://picsum.photos/300/200?image=0) center/cover no-repeat;
}
<div class="box">

</div>

Upvotes: 1

Related Questions