Scaling image with text-indent replacement

[Jeager]

So I am working on my portfolio site, and have ran across this problem a few times in the past. If I do not use css to have the image as a background, and have the image in the HTML so I can make it scale with the rest of the site, text-indent shifts the image as well.

  Jason Penezich Logo 

.logo {

float:right;

text-indent: -9999px;

height:133px;

}

So I guess the question is, what is the best way to have an image be scaling while keeping text in a heading for screen readers/good practice? The simple way I am seeing is simply move the image outside of the heading, but I thought I read somewhere that it is best used inside heading tags, as that is where it belongs.

[Jeager]

Actually, just solved it myself. I added:

.logo img {

float:right;

max-width:100%;

}

This makes the image leave the flow, while still forcing the heading text to exit the page. However if there is a better way to do this, please feel free to explain.

[Paulie_D]

You might want to look at this: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

and this: http://nicolasgallagher.com/another-css-image-replacement-technique/

[Author]

Posts