Profile-card-component

I would use a <img> tag for card background and for the other background do something like this

background: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg), var(--your-color);
background-position: right 51vw bottom 37vh,left 50vw top 45vh;
background-repeat: no-repeat; 

Hope this helps!

Hi, One way to solve your problem with background-images is to first of all remove .pattern-top and .pattern-bottom elements from html, that is not good way to use them. You need to set those images as background of the body in this steps:

• you can use several(as many as you with) background images in same element, in your case on body, like this: background: url("image 1 url"), url("image 2 url);

• second step is to position those pictures correct way for that use background-position property, in your case it will be : background-position: left top, right bottom. first - "left top" will apply first image second "right bottom" to second image.

• you also need to change background-size to 50%, like this: background-size: 50%;

• and you don't want background to repeat itself so set backgtound-repeat: no-repeat;

That's all, but inn order to get comfortable with those properties I will suggest you to check this page out .

image not visible because this

<div class="pattern-top"> <svg width="978" height="978" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1=".779%" x2="50%" y2="100%" id="a"><stop stop-color="#0989B4" stop-opacity="0" offset="0%"/><stop stop-color="#53FFEE" offset="99.94%"/></linearGradient></defs><ellipse fill="url(#a)" transform="rotate(-135 489 489)" cx="489" cy="489" rx="489" ry="488" fill-rule="evenodd" opacity=".5"/></svg> </div>

contains no rule of it in css

i suggest that you lay out your background images from within you css and manipulate both svg background-position to top right and the other to the bottom left i hope how i restyled your html body section in css will give you a clear hint

body { background-color: var(--bg-color); background-image:url('./images/bg-pattern-top.svg'),url('./images/bg-pattern-bottom.svg'); background-repeat: no-repeat; background-position: right 51vw bottom 37vh,left 50vw top 45vh;

height: 100vh; font-family: "Kumbh Sans", sans-serif; }