"RESPONSIVE FULL BACKGROUND IMAGE"
Bootstrap 3.0.0 Snippet by ALIMUL AL RAZY

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: