Responsive background images?

[sensaetions]

Hi, I love this plugin for Wordpress, kudos to the team!

I'm curious if this plugin can apply the same rules to background images? Or images added via the functions.php file instead of via the admin editor? If so, how would I do so?

Thanks in advance!

[side777]

with CSS media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[jaspermdegroot]

@sensaetions

This test gives you insight in how to prevent multiple requests when using CSS media queries: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
If you need to write the CSS in your functions.php (so you can use PHP to generate the URLs), you can use wp_add_inline_style to add it in a style block in the head.

[jgraup]

I'm looking for a background-image solution as well.

Based on this Fiddle;
http://jsfiddle.net/trixta/bfqqnosp/embedded/result/

It might be possible with lazysizes + ls.bgset.min.js plugin:
https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset

[jaspermdegroot]

Be aware of the "lazy" part of the Lazysizes plugin. In other words, it's not only about responsive images but also about lazy loading.
You could indeed make it work with that JS plugin if you add some filters to replace the srcset and sizes attributes by data-bgset and data-sizes and to add the lazysizes class.
There is also the wp-lazysizes WordPress plugin which has as goal to work seamlessly with this plugin. Maybe it is going to take care of replacing the attributes, but that's more a topic for that repo.

I think background images on itself is outside the scope of this Responsive Images plugin, so I would suggest to close this ticket.

[jgraup]

Currently this plugin does a great job supplying the needed sizes for srcset and sizes. Would it be possible to just add a function to output the data-bgset? Regardless of lazysizes or any other plugin?

[tevko]

Hey all, while I definitely see the use case for a responsive background image, I think it's a bit outside of the scope for this plugin. You can add some logic to your functions.php file by making use of the tevkori_get_srcset_array( ) function, which will return all of the necessary image sizes, which should set you up for automatic background size wrangling.