How can i add backgroung image in the following svg?

Question

From this website

https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections

i generated the following svg

<div style="height: 100%; overflow: hidden;" class='parent' ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M213.19,0.00 C152.69,70.06 270.03,70.06 202.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="stroke: none; fill: #08f;"></path></svg></div>

the problem is that when i try to add background image for example here on the parent class

.parent {
    background-image: url('../../../assets/images/calendar.png');
}

then the image is hidden behind the blue color of the svg.How can i 'insert' this image to be on the blue svg color image ?

score 0 · Answer 1 · edited Oct 28 '21 at 16:31

0

change the opacity level so the color is lower opacity. something like this perhaps.

background { backgroundColor:blue, opacity: 0.5; }

edited Oct 28 '21 at 16:31

Nimantha

6,405
6
28
69

answered Oct 26 '20 at 22:30

Robert O'Toole

197
1
11

i need that hard blue color without the opacity – Oct 26 '20 at 22:42

score 0 · Answer 2 · answered Oct 26 '20 at 22:34

0

As name says - it's "background-image" so it always is on the background of selected element.

I suggest that you should make an <img> tag in parent element and style it so that .parent would have attribute position: relative and img should have position: absolute. Also remember to set top and left/right position for <img>.

answered Oct 26 '20 at 22:34

Igor Nowosad

529
3
9

I don't understand. Can you provide an example please – Oct 26 '20 at 22:43
As i understood, when i try what you said, i get separete images – Oct 26 '20 at 22:46

score 0 · Answer 3 · answered Oct 27 '20 at 02:23

it's Answered here https://stackoverflow.com/a/3798797/9017484

You can do it by making the background into a pattern:

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>

your code should be something like this:

<div style="height: 100%; overflow: hidden;" class='parent' >
<svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
    <defs>
      <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
        <image href="ImageFile.jpg" x="0" y="0" width="100" height="100" />
      </pattern>
    </defs>
<path d="M213.19,0.00 C152.69,70.06 270.03,70.06 202.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="stroke: none; fill: url(#img1);"></path>
</svg>
</div>

If i copy paste the code then i dont get the blue color of the svg.I don't know a lot about the svg images,where should i make changes to have the blue svg ? — , Oct 27 '20 at 10:11

How can i add backgroung image in the following svg?

3 Answers3