CSS text replace with image, need hyperlink

Question

I am using the text-indent technique to replace my <h1/> tag with my website's image as so:

<h1 title="Homepage">My logo</h1>

CSS:

#header h1 {
    float: left;
    background: transparent url('../images/logo.png');
    width: 214px;
    height: 64px;
    text-indent: -9999px;
}

The only problem is that I want to still have the new image act as a hyperlink. I tried doing:

<h1 title="Homepage"><a href="#">My logo</a></h1>

But since it is being indented, the link is too. I wanted to know if anyone had any suggestions on how to do this and still be valid XHTML.

EDIT I'd rather do it in a way that is accessible to users with screen readers, from what I read, doing a display:none will not work with some readers.

Linus Caldwell · Accepted Answer · 2013-06-06 19:53:29Z

7

There are many ways to do this, this is the way that I prefer, it works well, and is easy to implement.

<div id="header">
    <h1><a href="/" title="Homepage">Homepage</a></h1>
</div>

Then i do this css, this is also know as the "Leafy/Langridge image replacement" method

#header h1 a {
    display: block;
    padding: 22px 0 0 0;
    overflow: hidden;
    background-image: url(../images/sidebar/heading.png);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:22px;
}

The only thing you should have to edit is the height, and the padding-top. In this example it is 22px, this should be equal to your image-height.

edited Jun 6, 2013 at 19:53

Linus Caldwell

11.1k12 gold badges48 silver badges61 bronze badges

answered Jan 29, 2009 at 8:18

espenhogbakk

11.7k9 gold badges41 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Boughton · Accepted Answer · 2009-01-29 14:15:56Z

2

Why are you mucking about with negative indents - just use the alt attribute of the img tag?

<h1 title="Homepage><a href="#"><img src="images/logo.png" alt="My logo"/></a></h1>

edited Jan 29, 2009 at 14:15

answered Jan 29, 2009 at 7:55

Peter Boughton

113k32 gold badges125 silver badges177 bronze badges

1 Comment

bandi Over a year ago

you missed a closing angle bracket in the </a> tag

Brandon · Accepted Answer · 2011-08-01 09:03:28Z

2

@Partrik Hägne: You should't use display:none, because some screen readers will ignore that...

You can see a list of Nine Techniques for CSS Image Replacement on http://css-tricks.com, which describes the cons and pros for each solution.

edited Aug 1, 2011 at 9:03

Brandon

70.3k32 gold badges201 silver badges227 bronze badges

answered Jan 29, 2009 at 8:03

Davy Landman

15.5k6 gold badges54 silver badges76 bronze badges

3 Comments

Patrik Hägne Over a year ago

If the screen readers ignore it that's perfect, then the text content would be read back, that's just what we want, can't see what's negative with that. It seems that there are even better techniques though in the list though.

Davy Landman Over a year ago

@Patrik: the screen readers ignore it as in, don't read the text.. (Because display:none is also used to hide html parts for legitimate reasons)

Patrik Hägne Over a year ago

OK, I misunderstood you then. As I said, there seems to be better techniques than mine nowadays anyway! I'm a bit old school obviously. ;-)

Patrik Hägne · Accepted Answer · 2009-01-29 07:49:49Z

0

What you can do is remove the indent. And use a span to hide instead:

<h1 title="Homepage"><a href="#"><span>My logo</span></a></h1>

#header h1 span
{
  display: none;
}

You might have to set the width and height of the A-tag also since nothing fills using this trick.

answered Jan 29, 2009 at 7:49

Patrik Hägne

17.2k5 gold badges54 silver badges60 bronze badges

5 Comments

Patrik Hägne Over a year ago

Yeah, I really can't see the reasoning behind this down vote either.

espenhogbakk Over a year ago

I voted it down because its not the best way around, for starters it uses extra markup, the span tag has nothing to do there. And as Davy Landman said, display: none; has some downsides.

Patrik Hägne Over a year ago

I'm sure that you shouldn't down vote because it's not the ultimate solution, I think you've totally missed the point of why voting down. Just don't vote up.

espenhogbakk Over a year ago

"Above all, be honest. If you see misinformation, vote it down. Insert comments indicating what, specifically, is wrong. Even better — edit and improve the information! Provide stronger, faster, superior answers of your own!" display:none, may fail in screen readers, so I interpreted it as wrong...

Patrik Hägne Over a year ago

Not a single one of the imperatives in that sentence did you follow. To classify my answer as being "wrong" is a stretch, to say that it's misinformation is an even greater stretch. I agree, it may not be the ultimate solution, but it's definitely an acceptable solution.

Collectives™ on Stack Overflow

CSS text replace with image, need hyperlink

4 Answers 4

Comments

1 Comment

3 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related