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

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); 
 
    } 
 
\t }

<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%; 
 
    } 
 
\t }

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

Answer 2

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

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

Answer 3

Ну вы можете изменить 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>