Skip to content

Instantly share code, notes, and snippets.

@lbramos
Last active August 29, 2015 14:16
Show Gist options
  • Save lbramos/7d4dd8eaff88f4bd1576 to your computer and use it in GitHub Desktop.
Save lbramos/7d4dd8eaff88f4bd1576 to your computer and use it in GitHub Desktop.
Background Full Image - Responsive (CSS)
/* Solution to make a responsive background full image
courtesy of http://sixrevisions.com/css/responsive-background-image/ */
body {
/* Location of the image */
background-image: url("Concierge.jpg");
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment