How to Use CSS Media Query to Scale Background-Image to Viewing Window

How to use CSS media query to scale background-image to viewing window

Try this - you don't always need a media query to handle background images. The CSS3 background-size:cover property handles all that quite well on its own. The below works well for me on all mobile devices I've tested - especially well on Android, mobile version browsers and all tablets.

body { 
    background-image: url(/assets/img/living.jpg); 
    background-repeat: no-repeat; 
    background-position: center;
    background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
    width:100%; 
}

how to override background image in media query for different screen size?

You missed out the closing curly bracket for each media query. Add a closing curly bracket } for each media query and it shall work.

<style>

    @media only screen and (min-device-width: 414px)and (max-device-width: 550px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 450px !important;
}}
    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 375px !important;
}}

    @media screen and (min-device-width: 320px) and (max-device-width: 374px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 320px !important;
}}
</style>

Media queries and background images

According to this test:

If you want only the desktop version of the image to be downloaded on the desktop...

and only the mobile image to be downloaded on the mobile device -

You need to use a min-width declaration to specify a minimum browser width for the desktop image...

and a max-width for the mobile image.

So your code would be:

@media (min-width: 601px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x;
  }
}

@media (max-width: 600px) {
  #page {      
     background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

Background image, mobiles and media query

.container3{

  display: flex;

  align-items: center;

  background-size: cover;

  height: 700px;

  text-shadow: 0.25px 0.25px 0.25px #000000;

  background-image: url('Images/homepage.jpg');

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

}

@media all and (max-width:888px) {

  .container3 {

    width: 100%;

    background-image: url('http://feelgrafix.com/data/background/background-17.jpg');

  }

}

<html> 

  <title>Unity</title>

  <link href="Style.css" rel="stylesheet"/>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

  <meta name="viewport" content="width=500, initial-scale=1">

  <body>

    <div class="container3">

      <div class="title">

        <h1>

          bringing people together

        </h1>

        <p>free advertising space</p>

      </div> 

    </div>

  </body>

</html>

background image not resize properly on media query?

You should add width:100% to image

 img {
      width: 100%;
      height: auto;
    }

This will ensure that the image will always occupy full width of the container.

Check the snippet in full screen mode and mobile mode

.container {

  width: 500px;

  margin: 0 auto;

}

img {

  width: 100%;

  height: auto;

}

@media(max-width:768px) {

  .container {

    width: 300px;

  }

}

<div class="container">

  <img src="https://i.stack.imgur.com/UUOYB.png" />

</div>

How to Use CSS Media Query to Scale Background-Image to Viewing Window