Bootstrap Snippet Transparent text with parallax background using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
<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-fluid">
    <div class="parallax-div">
        <h1 class="parallax-text">
            Do what <br/>makes <br/>you happy
        </h1>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.parallax-div {
    height: 500px;
    background: url("http://res.cloudinary.com/tempest/image/upload/c_limit,cs_srgb,dpr_1.0,q_80,w_10000/MTMwOTgxMTI5NDk3OTA5NzI2.jpg");
    background-size: cover;
    background-attachement: fixed;
}
.parallax-text {
    overflow: hidden;
    background: #fff;
    color: #3a3a3a;
    font-size: 86px;
    line-height: 86px;
    font-weight: 700;
    text-transform: uppercase;
    mix-blend-mode: lighten;
    margin-top: 50px;
    height: 500px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Transparent text with parallax background"
Bootstrap 3.3.0 Snippet by Harut

Related: See More

Questions / Comments:

"Transparent text with parallax background" Bootstrap 3.3.0 Snippet by Harut

Related: See More

Questions / Comments:

"Transparent text with parallax background"
Bootstrap 3.3.0 Snippet by Harut