CHANGING THE BACKGROUND IMAGE USING CSS

Source Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

#sectionLinks{
margin: 0px;
padding: 0px;

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
vertical-align:middle;
background-image: url("lips1_off.gif");
background-repeat:no-repeat;
background-position:center;
font-weight: bold;
padding: 10px 0px 10px 15px;
text-decoration: none;
color: #21536A;
}

#sectionLinks a:hover{
background-image: url("lips1_on.gif");
background-repeat:no-repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight: bold;
text-decoration: underline;
}

</style>
</head>

<body>

<table width="128" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="128" height="48">
<div id="sectionLinks"><a href="#">Handbags &amp;<br>Accessories</a></div>
</td>
</tr>
<tr>
<td width="128" height="48">
<div id="sectionLinks"><a href="#">Featured<br>
Products
</a></div>
</td>
</tr>

</table>

</body>
</html>

Source Images (Right Click and Save)
    

go top