Replacing header tags with background images

HTML & CSS
1

Hi everyone, on this site I have a div called work and I just applied a background image to it that contains a nice looking text called work. What I wanted to know was if it would be better to use an h1 tag instead of that div and just apply that same background image to the h1 tag. But I’m not really sure the best way to do that, would I have to text-indent the h1 tag text? Thanks for any info. highly appreciated.

Here’s the css:


/* Content */
div#content {
	margin: 0 auto;
	width: 980px;
	padding-top: 20px;
}

/* Work */
div#work {
	background: url(images/heading_work.png) top center no-repeat;
	width: 100%;
	height: 17px;
}
div#work .leftworkspacer {
	float: left;
	margin-left: 10px;
	width: 420px;
	height: 1px;
}
div#work .rightworkspacer {
	float: right;
	margin-right: 10px;
	width: 420px;
	height: 1px;
}

/* Gallery */
div#gallery {
	position: relative;
	top: 5px;
	left: 12px;
	margin: 0 auto;
	padding: 20px;
	width: 920px;
}
div#gallery .shadow {
	background: url(images/thumbnail_shadow.png) bottom no-repeat;
	float: left;
	width: 290px;
	height: 230px;
	margin: 0px 15px 10px 0;
}
div#gallery img {
	background-color: #FFF;
	border: 1px solid #666;
	padding: 10px;
}

html:


	<div id="content">
		<div id="work">
			 <div class="leftworkspacer lines"></div>
			<div class="rightworkspacer lines"></div>
		</div>	
    	        <div id="gallery">
			<div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
                        <div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
                        <div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
			<div style="clear: left;"></div>
			
			<div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
                        <div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
                        <div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
			<div style="clear: left;"></div>
		</div>
	</div>

and the screenshot:

2

Generally, the ideal approach is to use this image replacement technique: http://www.pmob.co.uk/temp/headerreplacement3.htm

In other words, you place the image over the h1, so that it’s still there with images off.

However, you can just use the negative intent method, or a slew of others, such as this or [URL=“https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757c9e03dda4e463fb0d4db5a5f82d7”]this.