Skip to content

Instantly share code, notes, and snippets.

@Antoinebr

Antoinebr/dont-load-hidden-img.html

Created November 22, 2016 14:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Antoinebr/c60e85dbe033994c24877ff5c4fbf5a5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Antoinebr/c60e85dbe033994c24877ff5c4fbf5a5 to your computer and use it in GitHub Desktop.
Download ZIP
dont-load-hidden-img.html
Raw
dont-load-hidden-img.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="responsiveBackgroundImage" id="myImage" ></div>
<style>
.responsiveBackgroundImage {
width:100%;
background-size: 100%;
background-position: 50% 0%;
background-repeat: no-repeat;
}
/* Extra small devices (phones, less than 768px) */
#myImage {
background-image: url(http://placehold.it/768x150);
height: 150px;
}
@media (max-width: 768px) {
#myImage { background-image: none; }
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#myImage { background-image: url(http://placehold.it/992x150); }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
#myImage { background-image: url(http://placehold.it/1200x150); }
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#myImage { background-image: url(http://placehold.it/2000x150); }
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment