CODEWITHSUNDEEP
htmlcssimageresponsive-design
hj8ag
hj8ag

Reputation: 305

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

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%: 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?

Upvotes: 0

Views: 32

Answers (1)

Lajos Arpad
Lajos Arpad

Reputation: 76804

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.

Upvotes: 1

Related Questions