Bootstrap Snippet Fixed Background Image using HTML CSS

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container">
  <br>
  <div class="row-fluid">
    <div class="span10 offsetHalf">
          
        <i class="icon-screenshot icon-5x" style="color:#ee1111;"></i>
    </div>
  </div>
   <br><br><br>
    <div class="row-fluid">
      <h1 class="pull-center"><strong>BOOTSTRAP FIXED BACKGROUND</strong></h1>
      <p class="lead pull-center">A scrolling one page example layout</p>
    </div>  
  <br><br><br><br>
  <div class="row-fluid">
    
        <div class="span5 offsetHalf block">
          <div class="pull-center">
            <h1>Responsive Design</h1>
            Take a look at what we mixed up in our Bootstrap test labs.
            Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. <br>
            <h1><i class="icon-beaker icon-4x"></i></h1>
            <button class="btn btn-primary btn-flat">Go Here<i class="pull-right icon-chevron-right icon-large"></i></button>
          </div>
        </div>
        <div class="span5 block">
          <div class="pull-center">
            <h1>2013 Trends</h1>
            With all of the front-end frameworks at hand, why does Bootstrap lead? 
            Aliquam mauris arcu, tristique a, condimentum feugiat justo.<br>
            <h1><i class="icon-fire icon-4x"></i></h1>
            <button class="btn btn-primary btn-flat">Go There<i class="pull-right icon-chevron-right icon-large"></i></button>
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
@import url('http://fonts.googleapis.com/css?family=Open+Sans:200,300');
body {
    background: url('http://s.bootply.com/assets/64531/green_suburb.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#fff;
    background-color:#333;
    font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
}
a:link, a:visited {
    color:#eee;
}
.block {
    background-color:rgba(0,0,0,0.2);
    height:370px;
    padding-left:12px;
    padding-right:12px;
}
.block-sm {
    height:180px;
}
.btn-flat {
    font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
    border-radius:0px;
    border-width:0;
    background-image:none;
    padding:16px;
    margin:0 auto;
    margin-top:15px;
    width:70%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Fixed Background Image"
Bootstrap 3.3.0 Snippet by iammahesh

Related: See More

Questions / Comments:

"Fixed Background Image" Bootstrap 3.3.0 Snippet by iammahesh

Related: See More

Questions / Comments:

"Fixed Background Image"
Bootstrap 3.3.0 Snippet by iammahesh