<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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>
/* 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;
}
}
/* 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);
}
}
