Is there a srcset equivalent for css background image

html css background-image srcset
Martin Algesten picture Martin Algesten · Nov 7, 2014 · Viewed 52.3k times · Source

img with srcset attribute looks like a great way of doing responsive images. Is there an equivalent syntax that works in css background-image property?

HTML

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

CSS

.mycontainer {
    background: url(?something goes here?);
}

Answer

Yoav Weiss picture Yoav Weiss · Nov 8, 2014

image-set is the equivalent CSS feature. We should add equivalent srcset functionality (defining resources according to their dimensions) to the spec.

Currently it's only implemented in Safari, Chrome and Opera with the -webkit- prefix, and it only supports the x descriptors.

Related questions

CSS Display an Image Resized and Cropped

I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the image to the size I …

Read More
How to completely remove borders from HTML table

My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures. This is my code: <table> <tr> &…

Read More
Fit background image to div

I have a background image in the following div, but the image gets cut off: <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center"> Is there …

Read More