CODEWITHSUNDEEP
htmlcssimageresponsive
Light
Light

Reputation: 37

Make Background Image Responsive

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>

Upvotes: 0

Views: 467

Answers (3)

ab29007
ab29007

Reputation: 7766

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>

Upvotes: 1

frnt
frnt

Reputation: 8795

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>

Upvotes: 1

sol
sol

Reputation: 22919

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

Upvotes: 0

Related Questions