Using 1x / 2x image sizes in css through background-image : image-set


I'm creating a full-screen background image for a header but having some issues with firefox. As of now it works for both iOS and web via Chrome / Safari..

I don't know if I'm missing something small but I can't get it to work. When I use the firefox web browser the hero image doesn't load.

<section id="hero">.. titles buttons etc ...</section>
#hero {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center right;
    background-size: cover;
    align-content: center;
        -webkit-image-set (
            url("/img/tribe_s-1x.jpg") 1x,
            url("/img/tribe_s-2x.jpg") 2x );

any quick thoughts Nick Pettit ?

1 Answer

after posting i saw that image-set isn't supported by firefox (or ie, but who cares) http://caniuse.com/#search=image-set


Any suggestions on how to do what I want in a more supported way? I'm going to keep looking around.

I'm thinking of just doubling down.. though it's not very clean :

background-image: url("/img/tribe_s-1x.jpg");
background-image: -webkit-image-set (url("/img/tribe_s-1x.jpg") 1x, url("/img/tribe_s-2x.jpg") 2x );