Forums

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.

<header class="clearfix">
<h1 class="logo"> <img src="img/logo.png"> Jason Penezich Logo </h1></header>

.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/

treehouse : what would you like to learn today?

Forums

Scaling image with text-indent replacement