Background Image as Link II

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Background Image as Link II</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css_page_designs.css" rel="stylesheet" type="text/css" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<style type="text/css">
#logolink {
display: block;
width: 256px;
height: 256px;
background: url(http://i160.photobucket.com/albums/t184/PayneLess_Designs/Backgrounds/bg_04.jpg) no-repeat center scroll;
}

#bglink span {
display: none;
}
</style>
</head>
<body>
<h1>Background Image as Link II</h1>
<div id="wrap">
<div id="contents">

<p><a id="logolink" href="http://paynelessdesigns.com/" title="PayneLess Designs"></a></p>

<p>The anchor tag is naturally inline so you need to make it a block in order to hold a shape without inner content. The height &amp; width are those of the image.</p>

<p>To make this work in a non-CSS user agent as well, you might want to add something like this: #bglink span { display: none; }</p>

<p><a id="bglink" href="#"><span>Click my logo</span></a></p>

<p>If CSS isn't enabled, the text link replaces the image link.</p>

</div></div>
</body></html>