What’s the best way to add dynamic responsive background images?

Question

What is the best way to add (responsive) background images to a static site? Another requirement (which is decribed by 'dynamic') is that the image is set by the backend and therefore cannot be written directly into the CSS file.

Option A:

Inject background-image in the template via style attribute.

Pro: Preparser of the browser could fetch it.
Contra: It’s adding styles directly and hardcoded to the markup which isn’t ideal. I also don’t know how to achieve the responsive images solution with that without adding super complex media queries into the style attribute.

Option B:

Inject responsive background-image sources in the template as data-attributes and write the best assumption as style attribute via JavaScript.

Pro: Responsive Images are achievable. Inline styles are only written into markup by script.
Contra: Fails when JavaScript fails. Preparser can’t fetch it early. Therefore increases chance of a flash before image is displayed.

Option C:

Use content responsive images. Pro: Easy to do. Contra: This is not what I want to do and not semantically correct as the images clearly are only representational and should live in CSS, not HTML.

---

Do you have a better idea or know what’s the best option? Thanks for any additional insight or idea!

Answer 1

I don't like to listen to media queries in Javascript, as long as it can be handled with css.

AFAIK css background images won't be loaded, if they are hidden with display:none;. This is why I normally add a container holding multiple elements with different background images for different mediaqueries. Selecting the one that will be displayed can than be handled in css completely.

<div class="images" role="presentation" aria-hidden="true">
   <span class="images__image images__image--phone" style="background-image: url(foo/bar/phone.jpg);"></span>
   <span class="images__image images__image--tablet" style="background-image: url(foo/bar/tablet.jpg);"></span>
   <span class="images__image images__image--desktop" style="background-image: url(foo/bar/desktop.jpg);"></span>
</div>

I also used components on my side that changed the source of img elements with javascript, but that's not an ideal solution for background-images.

EDIT: too bad that attr() can't be used in anything else than content. Would be a great help here :(

UPDATE:

display: none; won't be enough, of course. You'll have to overwrite the background-image url for non-matching queries with background-image: none !important.

See this fiddle for a short demo: http://jsbin.com/wemunupumu/

Answer 2

I would use the classic option A and combine that with a responsive images proxy, for example WURFL's Image Tailor (which is a free service) or Akamai's Front End Optimization. That moves all of the complexity to them.

Pros:

• Easy to implement
• Future proof (adapting to new user agents)
• Reduces traffic on your side

Cons:

• You depend on an external service
• External service might charge money one day
• The external service will disallow proxy caching

Answer 3

After some tests I came up with a solution to add an <style> element to the head and use min-width and max-width media queries to insert the background image via CSS. The advantages are that you don't need JavaScript, don't have to use inline styles and only the appropriate background image is loaded.

Here is the article with more details.