Clipping Text

by Glynne Turner

HTML

<section class="dark">
   <h1>TITLE </h1>
  <img  />
</section>
 <section class="content"> 
      <div class="container">
         <div class="ct-section_header ct-section_header--type2">
            <h2>
               A World-Class Approach to Business
            </h2>
            <div class="ct-section_header-description">
               Companies are looking to do business with other great companies. WebCorpCo theme has what it takes to show the world you mean business.
            </div>
            <div class="clearfix">
               &nbsp;
            </div>
            <div class="ct-section_header-separator">
               &nbsp;
            </div>
         </div>
         <div class="row">
            <div class="col-md-4 col-sm-6">
               <div class="ct-icon_box media" onclick="location.href='#'">
                  <div class="media-left">
                     <i class="fa fa-users"></i>
                  </div>
                  <div class="media-body">
                     <h3 class="media-heading">
                        Marketing
                     </h3>
                     <div class="ct-icon_box-content">
                        Market to the right person, at the right time, at the place.
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-md-4 col-sm-6">
               <div class="ct-icon_box media" onclick="location.href='#'">
                  <div class="media-left">
                     <i class="fa fa-cogs"></i>
                  </div>
                  <div class="media-body">
                     <h3 class="media-heading">
                        Sales
                     </h3>
                     <div class="ct-icon_box-content">
                        Improve sales through the use of Big Data and Analytics.
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-md-4 col-sm-6">
     ...

CSS

body{margin:0;padding:0}

section h1 { 
  text-align: center;
  margin: 0;
  font-size: 30vh; 
  text-transform: uppercase;
  font-family: Montserrat, sans-serif;
  line-height: 100vh;
}
.dark h1 {
  color:  white; 
} 
 
  
.dark {
 position: absolute;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
  top: 0;
  left: 0;
  width: 100%;  
  height:100vh;background-image: url('https://i.pinimg.com/originals/02/34/d0/0234d0db1d9c4c76e99e76f1ccc85fb1.jpg'); 
}