Infographic Stylee

by J. Albert Bowden

HTML

<div class="infographic">
  <div class="infographicbg">
    <div class="infographicsection infographicsection01">
      <h2><a href="#readingorder" id="planheading">Plan Heading Structure Early</a></h2>
      <p>Ensure all content and design fits into a logical heading structure.</p>
    </div>
  </div>
</div>

CSS

.infographic{position:relative; margin-left:auto; margin-right:auto; width:650px; height:198px; overflow:hidden; outline:1px solid #000; }
.infographicbg{position:relative; height:198px; background-image:url("http://dev.bowdenweb.com/css/i/web-accessibility-for-designers-webaim-infographic.png"); background-position:0 -359px; background-repeat:no-repeat; position:relative; width:100%; height:198px; overflow:hidden; }
.infographicbg:before,.infographicbg:after{position:absolute; content:""; height:57px; width:100%; background-image:url("http://dev.bowdenweb.com/css/i/web-accessibility-for-designers-webaim-infographic.png"); background-position:0 -359px; background-repeat:no-repeat; position:absolute; left:0; z-index:9999}
.infographicbg:before{top:57px}
.infographicbg:after{bottom:0}
.infographicsection{position:absolute; top:57px; height:84px; width:100%; background-color:#fff; z-index:999999; background-repeat:no-repeat; background-image:url("http://dev.bowdenweb.com/css/i/web-accessibility-for-designers-webaim-infographic.png")}
.infographicsection01{background-position:0 -217px}
h2,p{display:none}