CODEWITHSUNDEEP
cssmedia-queries
redconservatory
redconservatory

Reputation: 21934

Media queries and background images

I have a div

<div id="page">

</div>

With the following css:

   #page {
    background: url('images/white-zigzag.png') repeat-x;
    }

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

I notice when I resize my browser, I see the "mobile" background (good) but if I go back and make my browser large, my previous "large" background does not always reappear.

It's an intermittent problem but it's happening often enough that I think I should address it.

Is there any way to get around this "background image not appearing" problem or a way to resize background images, so that the media query "shrinks" the background image to fit the new size? As far as I know there is no (widespread) way to change the size of a background image...

Upvotes: 17

Views: 63004

Answers (4)

R.G Creation
R.G Creation

Reputation: 1

 <div style="width: 100%; height:100%;" class="bg"></div>

.bg{
    background-image:url("coc.jpg");
    background-repeat: no-repeat;
    background-size:cover !important;
    background-position: center;
    overflow: hidden;
}
@media(max-width:900px){
    .bg{
        background-image:url("all.jpg") !important;
        background-repeat: no-repeat;
        background-size:cover !important;
        background-position: center;
        overflow: hidden;
    }
    }

Upvotes: 0

Tushar Dhingra
Tushar Dhingra

Reputation: 27

please use 

@media screen and (min-width: 320px) and (max-width:580px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x
  }
}

Upvotes: 0

Danield
Danield

Reputation: 125531

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

Upvotes: 24

ckaufman
ckaufman

Reputation: 1497

The code you provided is a little buggy which is probably a good place to start currently you have

#page {
background: url('images/white-zigzag.png') repeat-x;
}

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

The media query portion isn't complete. You still need to provide the CSS selector that you used outside of the query:

#page {
background: url('images/white-zigzag.png') repeat-x;
}

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

Start with that and let me know if that fixes things.

Upvotes: 1

Related Questions