I am faced with a chunk of HTML structured as follows:
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
</div>
To conceal all the text content and substitute it with an image using CSS, I am trying to link the entire block to the homepage without compromising standards compliance. How can I achieve this?
My solution was influenced by New in town
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
<a href="index.html">Home</a>
</div>
#header {
text-indent: -9999px;
width: 384px;
height: 76px;
background: transparent url(../images/header.png) no-repeat;
margin: 10px;
position: relative;
}
#header a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}