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!
body
or the element where you want the background the css propertyimg {max-width: 100%;}
and your image will be responsive.role="presentation"
andaria-hidden="true"
? That way you remove them from screen reader flow.