CodePen

HTML

            
              <div id="wrapper">
  <h3><span>Some Text</span></h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla mauris, mattis ac ullamcorper nec, convallis quis lectus. Phasellus elit sem, euismod eget placerat vel, elementum id lorem. Duis ullamcorper semper libero, malesuada tempus nulla volutpat eu. Vestibulum ante sapien, porttitor sit amet venenatis at, consectetur id eros. Suspendisse potenti. Nulla pellentesque malesuada fermentum. Integer lacinia augue eget purus faucibus laoreet.</p>
  <p>Sed nec lectus quis metus feugiat consequat. Quisque consequat, nisi quis tempus porta, tellus arcu semper est, non porttitor massa ipsum non magna. Aenean suscipit, neque non semper accumsan, orci felis accumsan purus, non placerat turpis nulla quis lorem. Nullam sit amet libero quis eros luctus convallis ac et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Sed sit amet est id nisi interdum facilisis in sed tellus. Aliquam pretium, purus id imperdiet imperdiet, enim augue ullamcorper augue, sed varius sapien libero sit amet risus.</p>
  <p>Pellentesque eget risus mi. Curabitur vel pulvinar velit. Suspendisse mattis faucibus diam et consequat. Morbi vulputate, nunc sit amet ultrices vulputate, elit quam blandit mi, in convallis erat libero ut nulla. Mauris lectus libero, vehicula et mattis id, sollicitudin sit amet augue. Quisque dictum commodo nibh, at aliquam sapien consequat ac. Suspendisse non tellus ac ligula imperdiet varius a eu erat. Morbi sit amet dui at magna posuere pharetra. Phasellus adipiscing bibendum lorem, id porttitor elit suscipit a. Pellentesque imperdiet nunc sed urna sollicitudin non adipiscing lectus accumsan.</p>
  <p>Vivamus sed neque a risus dignissim semper ut eu ligula. Quisque consequat neque augue. Sed scelerisque, dolor congue tempus gravida, est lacus cursus nisi, nec laoreet mauris nisl vitae nibh. Maecenas accumsan neque vitae mi feugiat ut mattis dolor accumsan. Nunc nec enim nec mauris scelerisque accumsan sed vitae arcu. Etiam dapibus ullamcorper urna non aliquet. Etiam nulla arcu, lobortis at hendrerit vel, rhoncus sed neque. Integer non est purus.</p>
  <p>Suspendisse ac turpis at augue iaculis cursus et euismod dui. Nunc non mauris nec tortor mollis auctor vel eu lectus. Vestibulum imperdiet consequat ante, id laoreet massa dapibus sit amet. Nunc felis leo, iaculis consectetur aliquet blandit, iaculis quis eros. Mauris a sapien vel felis tincidunt aliquet tempus sed felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ultrices pellentesque leo, at pharetra nisl sagittis a. Morbi pulvinar pharetra odio, at cursus ante vehicula a. Donec id nisi et leo placerat ornare. Maecenas augue enim, porttitor in molestie quis, fermentum a metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet quam quis ipsum placerat pulvinar at sed augue.</p>
</div>
            
          
!

CSS

            
              body {
  margin: 0;
  padding: 0;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
}

#wrapper {
  background: url(http://lorempixel.com/1000/500/nature) no-repeat fixed top center;
  width: 960px;
  margin: 0 auto;
  padding: 100px 20px;
  overflow: hidden;
}

h3 {
  height: 4px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  text-align: center;
  margin: 40px 0;
  line-height: 4px;
}

h3 span {
  background: url(http://lorempixel.com/1000/500/nature) no-repeat fixed top center;;
  padding: 4px 10px;
  font-size: 30px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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