Sources files for a Six Revisions tutorial called Responsive Full Background Image Using CSS
CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images Initial commit Jun 30, 2014
presentational-only
LICENSE Initial commit Jun 29, 2014
README.md Add content to README.md Jun 30, 2014
responsive-full-background-image-demo.html Initial commit Jun 30, 2014
responsive-full-background-image.css Initial commit Jun 30, 2014

README.md

Responsive Full Background Image Using CSS

Responsive Full Background Image

Demo

View the demo on Six Revisions.

What Is This?

These are the sources files for a Six Revisions tutorial called Responsive Full Background Image Using CSS.

  • responsive-full-background-image.css - this contains the CSS for achieving the responsive full background image
  • responsive-full-background-image-demo.html - this is the HTML source code
  • Files in the /presentational-only are not required. They're purely for demonstrative purposes.
  • /images directory contains the background images. The background image is from Unsplash.

Basics

The most important property/value pair is background-size: cover, which dynamically scales the background image to cover the viewport even when it's resized. Responsive full background image can be achieved using this simple style rule:

background: url(background-photo.jpg) center center cover no-repeat fixed;

For a faster page load on small screens (i.e., mobile devices) a scaled-down version of the background image is served using a media query.

For a complete explanation, read this tutorial: Responsive Full Background Image Using CSS.

License

The source code is released into the public domain under CC0 1.0 Universal. The source code is free of any copyright restrictions. You can use, copy, sell, modify, distribute, etc. the code, even for commercial purposes, all without asking permission, providing attribution or performing any requirement.