Image replacement for h1 not allowing link to stay

  • Resolved BenMoseley

    (@benmoseley)


    14 years, 4 months ago

    Hi,

    So what I’m trying to do is replace the <h1> text which is my blog name with a logo image instead. The image is replacing the text perfectly but the link is not applying itself to the image.

    I’m using the Phark Method. Here’s the relevant code:

    CSS:

    h1{
	height: 64px;
	background: transparent url(logo.png) no-repeat;
	text-indent: -9999px;
}

    HTML:
    <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name');?></a></h1>

    Again, the image is replacing the text perfectly. Only the image is no longer linked to the home page. Any suggestions?

Viewing 2 replies - 1 through 2 (of 2 total)

  • You can’t use that approach. Moving the block level H1 off the page also moves the link. You’d be better off applying your image to the enclosing <div></div> and adding the link to the enclosing div using this method.

    Thread Starter BenMoseley

    (@benmoseley)

    I got it to work with the Phark Method with some help.

    Changing the selector to h1 a did the trick. Also for anyone else that stumbles upon this, add display: block; width: XXXpx and you’ll be good to go.

    Thanks for the link anyways, esmi. I’m sure I’ll need to use that method someday.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image replacement for h1 not allowing link to stay’ is closed to new replies.