使背景图像具有响应性

Question

Was trying to make my clickable background image responsive on all devices but can seem to wrap my head around it. It is showing well on 10" and above screen devices but on lower screen devices, the image is chopped off. I will like to make it responsive on all devices. Any heads up on this will be appreciated.

The code used is found below:

 #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

Use contain property instead of cover if you want to see full image in background.

 *{ 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

Well you can change background-position to 100% as below in media query , this works fine, but this make your image as fixed background on mobile device compare to other visual result on other device.

 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

Try adding this to your media query:

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