Repository: sixrevisions/responsive-full-background-image
Branch: master
Commit: dba71470d3d7
Files: 6
Total size: 16.9 KB

Directory structure:
gitextract_mryc0yy9/

├── LICENSE
├── README.md
├── presentational-only/
│   ├── presentational-only.css
│   └── presentational-only.js
├── responsive-full-background-image-demo.html
└── responsive-full-background-image.css

================================================
FILE CONTENTS
================================================

================================================
FILE: LICENSE
================================================
CC0 1.0 Universal

Statement of Purpose

The laws of most jurisdictions throughout the world automatically confer
exclusive Copyright and Related Rights (defined below) upon the creator and
subsequent owner(s) (each and all, an "owner") of an original work of
authorship and/or a database (each, a "Work").

Certain owners wish to permanently relinquish those rights to a Work for the
purpose of contributing to a commons of creative, cultural and scientific
works ("Commons") that the public can reliably and without fear of later
claims of infringement build upon, modify, incorporate in other works, reuse
and redistribute as freely as possible in any form whatsoever and for any
purposes, including without limitation commercial purposes. These owners may
contribute to the Commons to promote the ideal of a free culture and the
further production of creative, cultural and scientific works, or to gain
reputation or greater distribution for their Work in part through the use and
efforts of others.

For these and/or other purposes and motivations, and without any expectation
of additional consideration or compensation, the person associating CC0 with a
Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
and publicly distribute the Work under its terms, with knowledge of his or her
Copyright and Related Rights in the Work and the meaning and intended legal
effect of CC0 on those rights.

1. Copyright and Related Rights. A Work made available under CC0 may be
protected by copyright and related or neighboring rights ("Copyright and
Related Rights"). Copyright and Related Rights include, but are not limited
to, the following:

  i. the right to reproduce, adapt, distribute, perform, display, communicate,
  and translate a Work;

  ii. moral rights retained by the original author(s) and/or performer(s);

  iii. publicity and privacy rights pertaining to a person's image or likeness
  depicted in a Work;

  iv. rights protecting against unfair competition in regards to a Work,
  subject to the limitations in paragraph 4(a), below;

  v. rights protecting the extraction, dissemination, use and reuse of data in
  a Work;

  vi. database rights (such as those arising under Directive 96/9/EC of the
  European Parliament and of the Council of 11 March 1996 on the legal
  protection of databases, and under any national implementation thereof,
  including any amended or successor version of such directive); and

  vii. other similar, equivalent or corresponding rights throughout the world
  based on applicable law or treaty, and any national implementations thereof.

2. Waiver. To the greatest extent permitted by, but not in contravention of,
applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
and Related Rights and associated claims and causes of action, whether now
known or unknown (including existing as well as future claims and causes of
action), in the Work (i) in all territories worldwide, (ii) for the maximum
duration provided by applicable law or treaty (including future time
extensions), (iii) in any current or future medium and for any number of
copies, and (iv) for any purpose whatsoever, including without limitation
commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
the Waiver for the benefit of each member of the public at large and to the
detriment of Affirmer's heirs and successors, fully intending that such Waiver
shall not be subject to revocation, rescission, cancellation, termination, or
any other legal or equitable action to disrupt the quiet enjoyment of the Work
by the public as contemplated by Affirmer's express Statement of Purpose.

3. Public License Fallback. Should any part of the Waiver for any reason be
judged legally invalid or ineffective under applicable law, then the Waiver
shall be preserved to the maximum extent permitted taking into account
Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
is so judged Affirmer hereby grants to each affected person a royalty-free,
non transferable, non sublicensable, non exclusive, irrevocable and
unconditional license to exercise Affirmer's Copyright and Related Rights in
the Work (i) in all territories worldwide, (ii) for the maximum duration
provided by applicable law or treaty (including future time extensions), (iii)
in any current or future medium and for any number of copies, and (iv) for any
purpose whatsoever, including without limitation commercial, advertising or
promotional purposes (the "License"). The License shall be deemed effective as
of the date CC0 was applied by Affirmer to the Work. Should any part of the
License for any reason be judged legally invalid or ineffective under
applicable law, such partial invalidity or ineffectiveness shall not
invalidate the remainder of the License, and in such case Affirmer hereby
affirms that he or she will not (i) exercise any of his or her remaining
Copyright and Related Rights in the Work or (ii) assert any associated claims
and causes of action with respect to the Work, in either case contrary to
Affirmer's express Statement of Purpose.

4. Limitations and Disclaimers.

  a. No trademark or patent rights held by Affirmer are waived, abandoned,
  surrendered, licensed or otherwise affected by this document.

  b. Affirmer offers the Work as-is and makes no representations or warranties
  of any kind concerning the Work, express, implied, statutory or otherwise,
  including without limitation warranties of title, merchantability, fitness
  for a particular purpose, non infringement, or the absence of latent or
  other defects, accuracy, or the present or absence of errors, whether or not
  discoverable, all to the greatest extent permissible under applicable law.

  c. Affirmer disclaims responsibility for clearing rights of other persons
  that may apply to the Work or any use thereof, including without limitation
  any person's Copyright and Related Rights in the Work. Further, Affirmer
  disclaims responsibility for obtaining any necessary consents, permissions
  or other rights required for any use of the Work.

  d. Affirmer understands and acknowledges that Creative Commons is not a
  party to this document and has no duty or obligation with respect to this
  CC0 or use of the Work.

For more information, please see
<http://creativecommons.org/publicdomain/zero/1.0/>

================================================
FILE: README.md
================================================
# Responsive Full Background Image Using CSS
[![Responsive Full Background Image](http://cdn.sixrevisions.com/0431-02_responsive_background_demo_ss.jpg)](http://sixrevisions.com/css/responsive-background-image/)

## Demo
View the [demo on Six Revisions](http://cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html).

## What Is This?
These are the sources files for a Six Revisions tutorial called [Responsive Full Background Image Using CSS](http://sixrevisions.com/css/responsive-background-image/).

* `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](http://unsplash.com/).

## 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](http://sixrevisions.com/css/responsive-background-image/).

## License
The source code is released into the public domain under [CC0 1.0 Universal](https://github.com/sixrevisions/responsive-full-background-image/blob/master/LICENSE). 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.


================================================
FILE: presentational-only/presentational-only.css
================================================
/* Presentational style rules only
 * Not required
 */

html, body, .container {
  height: 100%;
}

/* Reset */
html, body, h1, p, a, div, section {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
}

/* Basic */
body { 
  font: 18px/23px "Cantarell", sans-serif;
  color: #ffffff;
}

h1 {
  color: #efecec;
  text-transform: uppercase;
  font-size: 40px;
  line-height: 50px;
  font-weight: 400;
  margin-top: 20px;
}

a {
  color: #ffffff;
}

p {
  margin: 0 0 15px 0;
}

strong {
  font-weight: 700;
}

blockquote {
  display: block;
  max-width: 480px;
  margin: 15px auto;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.3);  
  color: #e1e1e1;
  font-family: "Kotta One", serif;
  font-size: 22px;
  line-height: 28px;
}

blockquote cite {
  display: block;
  font: 18px/23px "Cantarell", sans-serif;
  font-size: 16px;
  margin-top: 16px;
  color: #cccccc;
  text-transform: uppercase;
}

/* Layout */

.navbar {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  height: 40px;
  z-index: 9999;
  position: fixed;
}

  .inner {
    position: relative;
    margin: 0 auto;
    text-align: center;
  }

.navbar a {
  display: inline-block;
  border: 1px solid #fff;
  font-size: 14px;
  line-height: 24px;
  border-radius: 3px;
  padding: 2px 15px;
  text-decoration: none;
  margin-top: 5px;
}

.container {
  display: table;
  padding-top: 80px;
  width: 100%;
}

.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* Special */
.sub-title {
  margin: 50px auto;
  font-size: 18px;
  line-height: 23px;
  text-transform: uppercase;
}

.button {
  display: inline-block;
  padding: 6px 10px;
  color: #cafaea;
  border: 1px solid #cafaea;
  border-radius: 3px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
}

#more-content {
  display: none;
}

/* Media Queries */
@media only screen and (max-width: 340px) {
  
  .container {
    position: relative;
    display: block;
    float: left;
    vertical-align: baseline;
    margin: 0 auto;
    padding: 80px 0 0 0;
  }
  
  #more-content {
    float: left;
    margin-right: 10px;
    
  }
  
  body h1 {
    font-size: 18px;
    line-height: 23px;
  } 
  
  .content, blockquote {  
    display: inline;
    margin: 0 auto;
    padding-top: 80px;
    vertical-align: baseline;
  }

  blockquote {
    width: 150px;
    margin: 15px auto;
    font-size: 16px;
    line-height: 21px;
    background-color: transparent;
  }

  blockquote cite {
    font-size: 14px;
    line-height: 19px;
  }

  .sub-title {
    font-size: 14px;
    line-height: 21px;
  }

  .button, p {
    max-width: 150px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 20px;
  }

  html, body, .container {
    height: auto;
  }
}

================================================
FILE: presentational-only/presentational-only.js
================================================
$(document).ready(function()
{
  $('#load-more-content').click(function()
  {
    
    $('#more-content').toggleClass('shown');

    $('#load-more-content').hide();

    if( $('#more-content').hasClass('shown') )
    {
      $('#load-more-content').text('Hide content');
      $('#more-content').fadeIn('slow', function()
      {
        $('#load-more-content').fadeIn('slow');
      });
    }
    else
    {
      $('#load-more-content').text('Load some content');
      $('#more-content').fadeOut('slow', function()
      {
        $('#load-more-content').fadeIn('slow');
      });
    }
  });
});

================================================
FILE: responsive-full-background-image-demo.html
================================================

<!-- Tutorial URL: http://sixrevisions.com/css/responsive-background-image/ -->

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Full Background Image</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="author" content="Six Revisions">
  <meta name="description" content="How to use the CSS background-size property to make an image fully span the entire viewport.">
  <link rel="icon" href="http://sixrevisions.com/favicon.ico" type="image/x-icon" />
  <link href="http://fonts.googleapis.com/css?family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <!-- Not required: presentational-only.css only contains CSS for prettifying the demo -->
  <link rel="stylesheet" href="presentational-only/presentational-only.css">

  <!-- responsive-full-background-image.css stylesheet contains the code you want -->
  <link rel="stylesheet" href="responsive-full-background-image.css">
  
  <!-- Not required: jquery.min.js and presentational-only.js is only used to demonstrate scrolling behavior of the viewport  -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="presentational-only/presentational-only.js"></script>
</head>
<body>
  <nav class="navbar" id="top">
    <div class="inner">
      <a href="http://sixrevisions.com/css/responsive-background-image/">Read Tutorial</a>
    </div>
  </nav>
  <header class="container">
    <section class="content">
      <h1>Responsive Full Background Image</h1>
      <p class="sub-title"><strong>Resize your browser window</strong> <br /> to see the background image change in size</p>
      <p><a class="button" id="load-more-content" href="#top">Load some content</a></p>
      <p>To see scrolling behavior</p>
      
      <!-- Some content to demonstrate viewport scrolling behavior -->
      <div id="more-content">
        <p><br />Background image courtesy of <br /> <a href="http://unsplash.com/" target="_blank">Unsplash</a>.</p>
        <blockquote>
        Creating a goal-driven statement of what a product or application does results in better product experiences.
        It meets expectations because it is focused on solving the problem it was created to address.
        There is power in doing one thing and it doing it very well.
        <cite>
          Francisco Inchauste
          From <a href="http://sixrevisions.com/usabilityaccessibility/creating-a-timeless-user-experience/" target="_blank">Creating a Timeless User Experience</a>
        </cite>
        </blockquote>
        <blockquote>
        Fitts' law is centered around a mathematical equation that is used to illustrate the time it takes to reach a target object.
        A target object, in the context of UIs, can be any interactive element, such as a submit button, a hyperlink, and an input field in a web form.
        The idea is this: The quicker you can reach a target object, the more convenient and easy it is to use.
          <cite>
          Jason Gross
          From <a href="http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/" target="_blank">Improving Usability with Fitts' Law</a>
          </cite>
        </blockquote>
        <blockquote>
        Visual weight revolves around the idea that distinct elements in a design have varying heaviness relative to each other. 
        Sometimes visual weight is obvious, such as in the case where larger objects appear heavier than smaller objects because they take up more space. 
        In certain instances, it’s not so cut and dry, such as in the case of color. Some colors may look as if they are heavier and more dominant than others.
          <cite>
          Kayla Knight
          From <a href="http://sixrevisions.com/graphics-design/visual-weight-designs/" target="_blank">Working with Visual Weight in Your Designs</a>
          </cite>
        </blockquote>
      </div>
    </section>
  </header>
</body>
</html>

================================================
FILE: responsive-full-background-image.css
================================================
/* Responsive Full Background Image Using CSS
 * Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
*/
body {
  /* Location of the image */
  background-image: url(images/background-photo.jpg);
  
  /* Image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Image doesn't repeat */
  background-repeat: no-repeat;
  
  /* Makes the image fixed in the viewport so that it doesn't move when 
     the content height is greater than the image height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based on its container's size */
  background-size: cover;
  
  /* Pick a solid background color that will be displayed while the background image is loading */
  background-color:#464646;
  
  /* SHORTHAND CSS NOTATION
   * background: url(background-photo.jpg) center center cover no-repeat fixed;
   */
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
  body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
	}