admin管理员组文章数量:1323342
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!
Share Improve this question edited Mar 11, 2015 at 17:52 helloanselm asked Mar 11, 2015 at 17:06 helloanselmhelloanselm 3292 silver badges12 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 propertyimg {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"
andaria-hidden="true"
? That way you remove them from screen reader flow. – niksy Commented Mar 11, 2015 at 18:31
4 Answers
Reset to default 3I 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
版权声明:本文标题:javascript - What’s the best way to add dynamic responsive background images? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742134243a2422299.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论