"overlay"
Bootstrap 3.3.0 Snippet by exigentinc

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="page" class="page"> <div id="intro23" class="bg bg1" style="background-image: url(https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/images/intro17.jpg);"> <span class="overlay"></span> <div class="container"> <div class="introduce"> <h1 class="editContent">We Build <br> Your Dream House </h1> <p class="editContent">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p> </div> </div> </div> </div>
/*! CSS Used from: https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/bootstrap.css */h1 { margin: .67em 0; font-size: 2em; } @media print { *,:after,:before { color: #000!important; text-shadow: none!important; background: 0 0!important; -webkit-box-shadow: none!important; box-shadow: none!important; } p { orphans: 3; widows: 3; } } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :after,:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h1 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h1 { margin-top: 20px; margin-bottom: 10px; } h1 { font-size: 36px; } p { margin: 0 0 10px; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width:768px) { .container { width: 750px; } } @media (min-width:992px) { .container { width: 970px; } } @media (min-width:1200px) { .container { width: 1170px; } } .container:after,.container:before { display: table; content: " "; } .container:after { clear: both; }/*! CSS Used from: https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/style.css */::-moz-focus-inner { border: 0; padding: 0; } p { font-size: 16px; } h1 { font-size: 34px; line-height: 54px; }/*! CSS Used from: https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/style-intro.css */#intro23 { background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 200px 0 300px 0; color: #fff; position: relative; } #intro23 .container { position: relative; } #intro23 .overlay { background-color: #000; width: 100%; height: 100%; position: absolute; top: 0; opacity: .55; } #intro23 .container .introduce { width: 100%; margin: 120px auto 20px auto; } #intro23 .container .introduce h1 { text-transform: uppercase; font-size: 42px; margin: 0; line-height: 1.2; font-weight: 700; } #intro23 .container .introduce p { margin: 20px 0; width: 60%; } @media (max-width:768px) { #intro23 .container .introduce p { width: 100%; } }

Related: See More


Questions / Comments: