Question

I apologize in advance if I am asking asking question with impossible answer. But I just thought it was worth asking, maybe somebody knows how to achieve what I am asking for.

I have image on the page like this ( image url is generated dynamically on the server by PHP ):

<img src="/images_BIG/image_12345.jpg" />

Now – I would love to use only CSS media queries to change this image URL, let’s say to this ( when browser viewport width is smaller than e.g. 800px ):

<img src="/images_SMALL/image_12345.jpg" />

I know this can be done by PHP (detecting mobile browsers and return appropriate URL) or use Javascript to change URL on the fly. But is this possible with CSS3 ? I am aiming only on HTML5 browsers so no need to care about IE.

Thank you for any thoughts and help in advance.

Answer 1

Wrap the image in a div. Use mobile first, so that it only downloads the small version of the image on small screens. On bigger screens, the image will be hidden and a background image will be there instead.

The two downsides – a non-semantic wrapping div, and the need to specify the height and width of the div. The upside is that you get the foreground image in the HTML.

The HTML

<div class="imgContainer"><img src="/images_SMALL/image_12345.jpg" /></div>

The CSS

// for screens bigger than 800px
@media screen and (min-device-width:800px) {
  div.imgContainer {
    background-image:url(../images_BIG/image_12345.jpg);
    background-size:100px;
    width:100px;
    height:100px;
  }
  img {
    display:none;
  }
}

---

EDIT
Based on your comment above, I would say add the wrapping div and set its background image with jQuery.