Media Queries and Background Images

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

Media query not working with background images

Try it like this. The media query should be below the default rule so it can override it properly.

On other hand, the !important goes before the ; not after, but is not needed, at least for this snippet.

Last, the code snippet won't work properly in the snippet preview with 930px as media query breakpoint because the snippet is shown in a iframe and its viewport is less than 930px so default rule will always be overriden by the media query in the snippet preview. To avoid this see the snippet in a blank page by clicking Expand snippet.

#image {
    background-image: url(http://placehold.it/200x80);
    border-right: 1px solid black;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 200px;
}

@media only screen and (max-width: 930px){
    #image {
        background-image: url(http://placehold.it/80x88);
        width: 88px;
    }
}

<div id="image"></div>
    <!--Some Code-->

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>

Media queries: background-image not displayed

The background isn't on #beste-lage but on .bt-op-item-content.

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