5

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!

10
  • dynamic as is in the image will change to a different image?
    – floor
    Mar 11, 2015 at 17:10
  • I don't think the first option would need super complex media queries. Just add to the body or the element where you want the background the css property img {max-width: 100%;} and your image will be responsive. Mar 11, 2015 at 17:11
  • Why don't you make separate classes each with a different background image, toggle that class. Make sure all the images are the same size and big enough for whatever resolution then give the image a width of 100%
    – floor
    Mar 11, 2015 at 17:16
  • It will fit your image to the container element width, so small image would be stretch. But that is another problem and had nothing to do with CSS, you can't make a small image look good at bigger size Mar 11, 2015 at 17:17
  • 1
    Maybe option C with ARIA attributes such as role="presentation" and aria-hidden="true"? That way you remove them from screen reader flow.
    – niksy
    Mar 11, 2015 at 18:31

4 Answers 4

3

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/

5
  • Actually attr() cannot even be used in content when it contains a URL which is a pity because that would’ve solved most of my problem. But this is likely not to change soon as it’s a potential security risk allowing it. Mar 11, 2015 at 17:55
  • The solution would be a possibility but adds empty representational-only markup which I try to avoid usually. Currently the prefetcher would also fetch every image as it’s set as style attribute and doesn’t evaluate CSS file media queries. Therefore it’s not ideal. (source: timkadlec.com/2012/04/media-query-asset-downloading-results) Mar 11, 2015 at 18:03
  • I tested this in current browsers some month ago (when I build this) and the images did not load until the media query matched. At least in the browser developer tools. Don't know what happens under the hood. A javascript solution changing background images would be your choice than. You could of course hardcode the urls into css, nested in media queries, too.
    – Andreas
    Mar 11, 2015 at 18:34
  • Update: forget the important part... you have to overwrite the background-image with none !important for non-matching media queries. display: none was of course wrong. Will add a fiddle soon
    – Andreas
    Mar 11, 2015 at 18:53
  • Just set up a test case exactly with your scenario: Firefox only loads the resource that is set to display: block but Chrome (Canary, heard Chrome does some sort of style inline evaluation in the prefetcher now) downloads in fact all three images. See the test case here: jsbin.com/sunani/1 Mar 11, 2015 at 19:01
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
1

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.

0

The following Html CSS will show image in mobile view only

Html:

<div class='backImg' style='background-image:url({$imageLink}); background-size:100% 100%;'>   
         Some Text
</div> 

Css:

@media(min-width: 480px){ 
    .backImg{
        background-image:none !important;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.