Skip to content

Instantly share code, notes, and snippets.

@Vortexmind
Created July 1, 2020 16:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Vortexmind/36cae0f651762ac93e5e4848de2e5c21 to your computer and use it in GitHub Desktop.
Save Vortexmind/36cae0f651762ac93e5e4848de2e5c21 to your computer and use it in GitHub Desktop.
.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