Сделать фоновое изображение отзывчивым

Question

Пытался сделать мое кликабельное фоновое изображение отзывчивым на всех устройствах, но, похоже, обвил его головой. Он хорошо отображается на экранах с диагональю 10 дюймов и выше, но на устройствах с более низким экраном изображение обрезается. Я хотел бы сделать его отзывчивым на всех устройствах. Любые замечания по этому поводу будут оценены.

Используемый код находится ниже:

#range-logo {
margin:0 auto;
  background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  display: block;
  height: 800px;
  width: 1240px;
}


@media only screen and (max-width: 767px) {
  #range-logo {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
  }
 }

<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>

Answer 1

Использование contain собственность вместо cover если вы хотите увидеть полное изображение в фоновом режиме.

*{
  margin:0;
  padding:0;
}
body,html{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}

#range-logo {
margin:0 auto;
  background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  display: block;
  height: 100vh;
  width: 100%;
}


@media only screen and (max-width: 767px) {
  #range-logo {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
  background-size:100% 100%;
  }
 }

<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>

Answer 2

Ну, вы можете изменить background-position в 100% как показано ниже media query, это прекрасно работает, но это делает ваш образ как fixed background на мобильном устройстве сравните с другим визуальным результатом на другом устройстве.

body{
margin:0px;
}
#range-logo {
margin:0 auto;
  background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  display: block;
  height: 800px;
  width: 1240px;
}


@media screen and (max-width: 767px) {
  #range-logo {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
    background-size:100% 100%;
  }
}

<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>

Answer 3

Попробуйте добавить это к вашему медиа-запросу:

    @media only screen and (max-width: 767px) {
      #range-logo {
        background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
        background-size:contain;
      }
}