javascript - What’s the best way to add dynamic responsive background images? - Stack Overflow

admin管理员组

文章数量:1323517

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 plex 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!

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 plex 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!

• javascript
• css
• performance
• responsive-design

Share Improve this question Follow edited Mar 11, 2015 at 17:52 helloanselm asked Mar 11, 2015 at 17:06 helloanselmhelloanselm 32922 silver badges1212 bronze badges 10

• dynamic as is in the image will change to a different image? – floor Commented Mar 11, 2015 at 17:10
• I don't think the first option would need super plex 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. – Yerko Palma Commented 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 Commented 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 – Yerko Palma Commented 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 Commented Mar 11, 2015 at 18:31

 |  Show 5 more ments

4 Answers 4

Sorted by: Reset to default 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 pletely.

<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 ponents 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./wemunupumu/

I would use the classic option A and bine 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 plexity 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

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.

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

本文标签： javascriptWhat’s the best way to add dynamic responsive background imagesStack Overflow