Image Replacement

HTML & CSS
1

I can’t figure out why this code will not work. I have broken it down to just the h1 and am trying to replace it with a logo.png. I can put the logo.png directly into the html with an img tag and it works - but when I try to replace the h1 text with the same logo.png it won’t work. I tried a couple of other replacement methods and they don’t work either. Confused??

<h1><a href=“#”>Portfolio</a></h1>

h1{
display: block;
float: left;
width: 219px;
height: 58px;
text-indent:-9999px;
}

h1 a{
display: block;
width: 219px;
height: 58px;
background:url(images/logo.png) no-repeat 0 0;
outline: none;
}

2

Hi,

Your code is working so you must have an incorrect url for the image. If you add background red you can see that it is working.

You can shorten the code to this:


h1, h1 a {
	float: left;
	width: 219px;
	height: 58px;
	text-indent:-9999px;
	outline: none;
	background:url(images/logo.png) no-repeat 0 0;
       overflow:hidden;
}

If the image is not transparent then use the Gilder Levin method for best accessibility.