Decorative Images Examples: Background Images
Accessibility Features of Example
- The only in-line
HTML img
markup is for the logo, which is an informative image. - The gradated background image, a decorative image, is incorporated using the CSS
background-image
property of spans withclass
ofline1
,line2
,line3
, orline4
. - See the example of logo image under Informative Image for the Best Practices of incorporating the logo image in this 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>
<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;
}
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;
}