How to adapt the background of the site to mobile?

Question

css

Hello, I installed a static background on the site:

body {
        margin: 150px 0 0;
        background-image: url("https://sun9-11.userapi.com/impg/8f4DsGx6js8z7u1wYrks3qiQaNwJMdRPw1Jd4Q/DThGSmeJy9Q.jpg?size=1920x1080&quality=96&sign=ae91032ec6eda7732b8bb8ccd7c08d3f&type=album");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background:size: cover;
      }

But on mobile, half of the screen is white, the first half is the picture itself, how can I make the picture just stretch?
Here's what it looks like on mobile:

Answer 1

try background-size: contain

Answer 2

Focus on the right side of the image:

{
  ...
  background-position: 100% 0;
}

Answer 3

@media screen and (max-width:  /*размер экрана*/) {
    body {
        
    }

    header, footer {
        
    }

    a {
        
    }
}