Skip to content

Instantly share code, notes, and snippets.

@quinns

quinns/gist:3724c0184b7d63a9a1f0425f98aa1ce6

Created April 13, 2017 21:28
Show Gist options
  • Save quinns/3724c0184b7d63a9a1f0425f98aa1ce6 to your computer and use it in GitHub Desktop.
Save quinns/3724c0184b7d63a9a1f0425f98aa1ce6 to your computer and use it in GitHub Desktop.
Download ZIP
Absolutely Responsive Full-Screen Background Images
Raw
gistfile1.txt
Copied from https://www.webdesign.org/absolutely-responsive-full-screen-background-images.22549.html
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Absolutely Responsive Background Image Demo</title>
</head>
<body>
<!-- Note that I have chosen a middle ground as far as the default image size goes, just as a fallback. -->
<div class="bodybg">
<img src="images/medium-background-image.jpg"
src-set="images/small-image.jpg 500w,
images/medium-image.jpg 1000w, images/large-image.jpg 2000w"
alt="">
</div>
<h1>Pure CSS Responsive Background Image Demo</h1>
</body>
</html>
The CSS
Note: The CSS part of this solution was adapted from this demo: http://codepen.io/ErwanHesry/pen/JcvCw/
/* This solution doesn't just work for whole pages. It can be adapted to smaller containing elements as well. For now, we're making it the size of the viewport. */
.bodybg {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.bodybg img {
/* These properties make sure that the "background image" covers all available space. */
position: absolute;
top: 0;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%; /* This bit centers the image. */
left: 50%;
transform: translateX(-50%);
/* Here, we make sure that nothing sticks out on the side that shouldn't. */
overflow-x: hidden;
}
Read more: https://www.webdesign.org/absolutely-responsive-full-screen-background-images.22549.html#ixzz4eAR18evk
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment