Media queries and background images

Question

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...

Did you try using @media (min-width:600px) { background: url('images/white-zigzag.png') repeat-x; } I'm not sure if this works, thats why its a comment. — Tim, Feb 29 '12 at 20:32
You probably already know this link: http://css-tricks.com/how-to-resizeable-background-image/ (re changing the size of a background image). — juanrpozo, Feb 29 '12 at 20:42
When I do it doesn't resize the image...that is I just see part of the image, not the image sized down — redconservatory, Feb 29 '12 at 20:42
@juanrpozo interesting but that's not css background: url...that's an image tag that's styled..might try it out. — redconservatory, Feb 29 '12 at 20:44
Take a look at the `background-size` property. It's CSS3 but quite [well supported](http://caniuse.com/#search=background-size). One of its possible values is `cover`. It's explained in the first link of the article I linked to. By the way, what browser are you using? — juanrpozo, Feb 29 '12 at 20:58
Using Chrome and Firefox and mobile Safari...this works, thanks! — redconservatory, Feb 29 '12 at 21:11
Hm can you put your response in the "answer" box so I can check it as the correct answer? — redconservatory, Apr 05 '12 at 18:46

score 24 · Accepted Answer · answered Jun 06 '13 at 12:20

24

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

answered Jun 06 '13 at 12:20

Danield

121,619
37
226
255

1

In case it helps anyone, the problem I had was not including the `` tag appropriately, something like: `` ahead of the rest of the CSS. – YPCrumble Jan 26 '16 at 23:34
There is a problem with this: Firefox and Chrome will download the smaller image size, too, when the viewport is resized (to a smaller size), e.g. you start with the larger screen size (width >= 601px) and the browser downloads the larger image; then you resize the browser to width <= 600px and your browser will download the smaller image, too, which is totally pointless, because you already have the large resolution and now you double download the smaller one, too. Completely against the logic of things (saving bandwith by downloading only the largest size you need). – imrek Apr 29 '16 at 14:58
2

@DrunkenMaster you may not *like* that behavior but it is by no means illogical. The browser doesn't know that the two images are just different resolutions of the same picture, many people display *different* images depending on if it's mobile or desktop. I, for one, prefer this behavior. – TKoL Oct 06 '17 at 08:47

score 1 · Answer 2 · answered Feb 29 '12 at 20:44

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.

Sorry that was a typo on my part...I corrected my question above. — redconservatory, Feb 29 '12 at 20:57

score 0 · Answer 3 · edited Jun 28 '19 at 13:28

0

please use

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

edited Jun 28 '19 at 13:28

barro32

2,559
23
36

answered Aug 28 '15 at 10:21

Tushar Dhingra

27
1

2

please explain why your answer will improve on the question – nomistic Aug 28 '15 at 15:05

score 0 · Answer 4 · answered Sep 07 '21 at 17:51

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

Please add further details to expand on your answer, such as working code or documentation citations. — Community, Sep 07 '21 at 19:00

Media queries and background images

4 Answers4

Linked