CodePen

HTML

            
              <div class="header-block">
  <h2><span>Big buck bunny is really awesome</span></h2>
</div><!-- .header-block -->
            
          
!
via HTML Inspector

CSS

            
              body {
  background: url(http://upload.wikimedia.org/wikipedia/commons/6/69/Big_Buck_Bunny_-_forest.jpg) center top no-repeat;
  
  -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

div { 
  float: left;
  width: 250px; 
  height: 304px; 
  margin: 20px; 
 }

h2 {
  position: relative;
  padding-left: 10px;
  
  font-weight: 300;
  font-size: 27px;
  color: #ffffff;
  line-height: 39px;
  white-space: pre-wrap;
}

h2:before { 
  content:""; 
  display: block; 
  width: 10px; 
  height: 100%; 
  position: absolute; 
  top:0; 
  left: 0; 
  background: rgba(0,0,0,0.75); 
}

h2 span { background-color: rgba(0,0,0,0.75); }
h2 span { padding: 4px 5px 4px 0; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................