Skip to content

Instantly share code, notes, and snippets.

@Vortexmind
Created July 1, 2020 16:23
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
.responsive-header-img {
background-image: url(https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_2000,c_fit,q_auto,f_auto,dpr_auto/{{img_url background size="xl"absolute="true"}});
}
@media(max-width: 1000px) {
.responsive-header-img {
background-image: url(https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_1000,c_fit,q_auto,f_auto,dpr_auto/{{img_url background size="l" absolute="true"}});
background-image: -webkit-image-set(url(https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_1000,c_fit,q_auto,f_auto,dpr_auto/{{img_url background size="l" absolute="true"}}) 1x,
url(https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_2000,c_fit,q_auto,f_auto,dpr_auto/{{img_url background size="xl" absolute="true"}}) 2x);
background-image: image-set(url(https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_1000,c_fit,q_auto,f_auto,dpr_auto/{{img_url background size="l" absolute="true"}}) 1x,
url(https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_2000,c_fit,q_auto,f_auto,dpr_auto/{{img_url background size="xl" absolute="true"}}) 2x);
}
}
@media(max-width: 600px) {
.responsive-header-img {
background-image: url(https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_600,c_fit,q_auto,f_auto,dpr_auto/{{img_url background size="m" absolute="true"}});
background-image: -webkit-image-set(url(https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_600,c_fit,q_auto,f_auto,dpr_auto/{{img_url background size="m" absolute="true"}}) 1x,
url(https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_1000,c_fit,q_auto,f_auto,dpr_auto/{{img_url background size="l" absolute="true"}}) 2x);
background-image: image-set(url(https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_600,c_fit,q_auto,f_auto,dpr_auto/{{img_url background size="m" absolute="true"}}) 1x,
url(https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_1000,c_fit,q_auto,f_auto,dpr_auto/{{img_url background size="l" absolute="true"}}) 2x);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment