I want to place the bottom circle on the left side. But, the circle changes position when I view it on the mobile phone screen. How can I correct that?

enter image description here

**HTML **

<div>
   <img  src="images/bg-pattern-top.svg" alt="cicletop-img">
   <img  src="images/bg-pattern-bottom.svg" alt="circlebottom-img">
   <img  src="images/bg-pattern-card.svg" alt="card-img">
</div>

CSS

.circlebottom-img {
    width: 800px;
    height: auto;
    z-index: -1;  
    position: absolute;
    top: 350px;    
    right: -7%;
    z-index: -1; 
}

That gives me this:

enter image description here

But, what I want is this:

enter image description here

What can I do?

CodePudding user response：

I think you might take a try like this:

<div >
   <img  src="images/bg-pattern-top.svg" alt="cicletop-img">
   <img  src="images/bg-pattern-bottom.svg" alt="circlebottom-img">
   <img  src="images/bg-pattern-card.svg" alt="card-img">
</div>

.parent {
    position: relative;
}

.circlebottom-img {
    width: 800px;
    height: auto; 
    position: absolute;
    bottom: 0;    
    left: 0;
    z-index: -1; 
}

CodePudding user response：

You can just place the two circles based on the viewport width, using the vw unit, so you can say that the first circle will be placed on 70vw from the right, and the second one will be placed on 70vw from left, or play with it as you like.

HTML:

<div>
   <img  src="images/bg-pattern-top.svg" alt="cicletop-img">
   <img  src="images/bg-pattern-bottom.svg" alt="circlebottom-img">
   <img  src="images/bg-pattern-card.svg" alt="card-img">
</div>

CSS:

.circlebottom-img {
    width: 800px;
    height: auto;
    position: absolute;
    top: 350px;    
    left: 70vw;
    z-index: -1; 
}