Answers.Body: <p>This is actually a difficult problem, and there are many possible solutions, none of which are optimal (until <a href="http://caniuse.com/#feat=srcset" rel="nofollow noreferrer">img srcsets</a> are better supported).</p>
  
  <p>The way I would probably go about doing this, depends on a couple of factors.</p>
  
  <p>If it is important to show <em>something</em> on load, you need to include an initial image in the markup, like you have already. If that is not an issue, I would include the two different resolutions in data-attributes on the <code>&lt;li&gt;</code>, and then add the appropriate one with Javascript.</p>
  
  <p>It would probably go a little like this:</p>
  
  <p>markup:</p>
  
  <p><code>&lt;li class="js-resp-bg-img" data-low-res="{{ lowresimage.getUrl() }}" data-high-res="{{ highresimage.getUrl() }}"&gt;....&lt;/li&gt;</code></p>
  
  <p>js: (not tested, probably needs tweaking to work)</p>
  
  <pre><code>$(function() {
      var windowWidth = window.innerWidth || $(window).width();
      var threshold = 600;
      $('.js-resp-bg-img').each(function(idx, elem) {
          var bgImageUrl = $(elem).attr('data-low-res');
          if (windowWidth &gt; threshold) {
              bgImageUrl = $(elem).attr('data-high-res');
          }
          $(elem).css({
              backgroundImage: 'url(' + bgImageUrl + ')'
          });
      });
  });
  </code></pre>
  
  <p>If you need something to display on load, you put the low res image in the style tag, and switch it out only when appropriate. Downside with this is you'll load the asset twice.</p>
  
  <p>Also, in my example I'm only testing for window width, if you need to you can do additional tests, for example testing for retina with <a href="https://stackoverflow.com/questions/19689715/what-is-the-best-way-to-detect-retina-support-on-a-device-using-javascript">this method.</a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-13T18:36:48.660Z
Answers.LastActivityDate: 2015-07-13T18:36:48.660Z
Answers.LastEditDate: 2017-05-23T12:38:53.957Z
Answers.UserDisplayName: megatrond
Body: <p>I am currently dynamically loading a background image using the style tag:</p>
  
  <pre><code>&lt;li style="background-image: url({{ project.portfolioImage.first().url }})"&gt; 
  </code></pre>
  
  <p>I want to add support for retina screens, so I want to also upload a hi-res version as well as the standard one and serve whichever is applicable. </p>
  
  <p>Can I use <code>{% includeHiResCss %}</code> to do that? </p>
  
Tags: <assets><css><responsive-images>
Title: Dynamically load either standard res or hi-res background image
ThreadText: # Dynamically load either standard res or hi-res background image
  
  (Asked by: username_0 on 2015-07-13)
  
  I am currently dynamically loading a background image using the style tag:
  
  ```
  <li style="background-image: url({{ project.portfolioImage.first().url }})"> 
  
  ```
  
  I want to add support for retina screens, so I want to also upload a hi-res version as well as the standard one and serve whichever is applicable.
  
  Can I use `{% includeHiResCss %}` to do that?
  
  **Tags:** assets, css, responsive-images
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2015-07-13. Score: 1
  
  This is actually a difficult problem, and there are many possible solutions, none of which are optimal (until [img srcsets](http://caniuse.com/#feat=srcset) are better supported).
  
  The way I would probably go about doing this, depends on a couple of factors.
  
  If it is important to show *something* on load, you need to include an initial image in the markup, like you have already. If that is not an issue, I would include the two different resolutions in data-attributes on the `<li>`, and then add the appropriate one with Javascript.
  
  It would probably go a little like this:
  
  markup:
  
  `<li class="js-resp-bg-img" data-low-res="{{ lowresimage.getUrl() }}" data-high-res="{{ highresimage.getUrl() }}">....</li>`
  
  js: (not tested, probably needs tweaking to work)
  
  ```
  $(function() {
      var windowWidth = window.innerWidth || $(window).width();
      var threshold = 600;
      $('.js-resp-bg-img').each(function(idx, elem) {
          var bgImageUrl = $(elem).attr('data-low-res');
          if (windowWidth > threshold) {
              bgImageUrl = $(elem).attr('data-high-res');
          }
          $(elem).css({
              backgroundImage: 'url(' + bgImageUrl + ')'
          });
      });
  });
  
  ```
  
  If you need something to display on load, you put the low res image in the style tag, and switch it out only when appropriate. Downside with this is you'll load the asset twice.
  
  Also, in my example I'm only testing for window width, if you need to you can do additional tests, for example testing for retina with [this method.](https://stackoverflow.com/questions/19689715/what-is-the-best-way-to-detect-retina-support-on-a-device-using-javascript)
  
  
  ---
  
  