css multiple images with gradient issue with responsive

Question

Here is my expected output:

Here is my produced output with width of 375px.

and here is at 767px:

Here is my css code:

.content{
        width:100%;
        background-image: 
        url("./../../images/small/tantum-winter-home.jpg"),
        url("./../../images/small/tantum-dotts-house.png"),
        linear-gradient(90deg,#e8e6e6 50%, rgba(0,212,255,0) 20%);
        background-repeat: no-repeat, no-repeat;
        background-position: 65% 20%, right 56% bottom;
        height: 35rem;
    }

I am facing 2 issues here:

1. the dotted pattern is not exactly starting with all sizes ( see 767px)
2. how to limit the gradient with some point in down.(should stop at where dotted pattern start ) which applied across height at present.

Answer 1

Here is a different idea that works better for responsive:

.box {
   height:300px;
   box-sizing:border-box;
   /* the padding will control the radial-gradient area */
   padding: 50px 50px 0 calc(100% - 200px);
   background:
    /* the image placed at right:0 and top:50px */
    url(https://picsum.photos/200/150) right 0 top 50px no-repeat,
    /* the main color having width:(100% - 100px) and height:(100% - 50px) */
    linear-gradient(#e8e6e6 0 0) 0 0/calc(100% - 100px) calc(100% - 50px) no-repeat,
    /* the circles pattern (2px radius inside a 8px*8px square) */
    radial-gradient(circle 2px,#757575 97%,transparent) 0 0/8px 8px content-box content-box;
   
}

<div class="box"></div>

You can replaced the radial-gradient with your png and have the following:

.box {
   height:300px;
   box-sizing:border-box;
   /* the padding will control the radial-gradient area */
   padding: 50px 50px 0 calc(100% - 200px);
   background:
    /* the image placed at right:0 and top:50px */
    url(https://picsum.photos/200/150) right 0 top 50px no-repeat,
    /* the main color having width:(100% - 100px) and height:(100% - 50px) */
    linear-gradient(#e8e6e6 0 0) 0 0/calc(100% - 100px) calc(100% - 50px) no-repeat,
    /* the circles pattern */
    url("./../../images/small/tantum-dotts-house.png") content-box content-box;
   
}