

<!-- 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>
  <style>
    /* 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);
      }
    	}
    </style>
</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>
