Is it possible to use 'responsive' images in/with a DIV background-image tag?

Question

I'm looking to use a selection of Thumbnails that are loaded into my site from a database at different sizes (all within a Masonry grid)

Normally I would simply use background-image:url(image.jpg); background-size: 100% 100%: background-image:url(image.jpg); background-size: 100% 100%: but I'm trying to be a little more bandwidth conscious with specific image file sizes. I also want to target a specific crop for mobile browsers using a portrait orientation.

Is it possible to use the features of the <picture> , namely media="(min-width: 40em) and (orientation: portrait)" while using the background-image property?

Or should I instead use the img or picture tags?

Answer 1

Use the image tag, along with media queries. That will solve the problem and you will be able to send smaller versions in case a smaller picture size is needed. If bandwidth is of serious concern here, then you might consider to do media-queries only based on screen size.