Как адаптировать фон сайта на мобильные?

Question

[Villian_Os]

Здравствуйте, установил на сайт фон статичный:

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;
      }

Но на мобильных половина экрана это белый цвет, в первая половина это сама картинка, как можно сделать так, чтобы просто растянулась картинка?
Вот как тупо выглядит на мобильном:

Comments

[Иван Гришов]

Скинь пример в jsfiddle, сделаю

Answer 1

[Alex]

попробуйте background-size: contain

Answer 2

[Сергей delphinpro]

Сделайте акцент на правой части изображения:

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

Answer 3

[Ренат]

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

    header, footer {
        
    }

    a {
        
    }
}

Comments

[Ренат]

или используйте
@media...{ img{ height: 300px; width: auto

[Villian_Os]

Растянуть в зависимости от экрана?