How can I give a svg a background image? [duplicate] - html

Question

This question already has an answer here:
Fill SVG path element with a background-image
(1 answer)
Closed 10 months ago.
I have a .jpg file and an .svg file and my goal is to make the .jpg file as background of the svg file but I did not find any way, is there such a possibility?
My goal I try to achieve is:

Answer 1

Context
You can use an SVG just like any other image, using
background: url('my.svg') or
<img src="my.svg" />
To show one image over the other, you need two elements, each holding an image.
There are generally two ways to do this:
having two elements, each with a background, overlapping each other
one component with a background, that is displaying an image.
The parent will have to be position: relative and the children, absolute.
Example 1
body {
margin: 0;
}
.wrapper {
position: relative;
width: 100%;
min-height: 100vh;
}
.element1 {
position: absolute;
width: 100%;
height: 100%;
background: url('https://picsum.photos/800/600');
background-size: cover;
}
.element2 {
position: absolute;
width: 100%;
height: 100%;
background: url('https://picsum.photos/200/300') center no-repeat;
}
<div class="wrapper">
<div class="element1" />
<div class="element2" />
</div>
Example 2
body {
margin: 0;
}
.element1 {
width: 100%;
height: 100%;
text-align: center;
background: url('https://picsum.photos/800/600');
background-size: cover;
}
<div class="element1">
<img alt="my text" src="https://picsum.photos/200/300" />
</div>