Decorative Images Examples: Background Images

Accessibility Features of Example

Example

HTML Code

<div id="header">
  <span class="rounded">
    <span class="line1"></span>
    <span class="line2"></span>
  <span class="line3"></span>
  <span class="line4"></span>
  </span>
  <div class="cites_logo">
    <a href="http://www.uiuc.edu/" name="page_top"><img src="../../../../www/images/UILogoVsm.gif" alt="University of Illinois at Urbana-Champaign logo"></a>
    <div class="cites"><a href="http://www.cita.uiuc.edu/">iCITA</a> </div>
    <div class="cites_expansion"><a href="http://www.cita.uiuc.edu/">Illinois Center for Information Technology Accessibility</a></div>
    <div class="uiuc_expansion"><a href="http://www.disability.uiuc.edu">Disability Resources and Educational Services (DRES)</a></div>
    <div class="uiuc_expansion"><a href="http://www.ahs.uiuc.edu/">College of Applied Health Sciences</a> | <a href="http://www.uiuc.edu/">University of Illinois at Urbana-Champaign</a></div>
  </div>
  <span class="rounded">
    <span class="line4"></span>
    <span class="line3"></span>
  <span class="line2"></span>
  <span class="line1"></span>
  </span>
</div>

CSS Code

#content div.examplebox span.rounded span.line1, span.line2, span.line3, span.line4 {
  background-image: url(../../../../../www/images/topbar-mod5.jpg);
  background-repeat: repeat-y;
  background-color: rgb(63, 63, 114);
  border-color: rgb(159, 159, 184);
}

#content div.examplebox div#header {
  padding: 0;
}

#content div.examplebox div#header a {
  color: #FFFFFF;
  font-size: 1.2em;
  text-decoration: none;
}

#content div.examplebox div#header a:hover {
  color: #FF6600;
  font-size: 1.2em;
  text-decoration: none;
}