Support » Fixing WordPress » Hyperlink from Background Image in CSS

  • I am a new WordPress user. I have spent the past month learning the ropes. I purchased a template to start my development. I have spent the past 4 weeks updating the look and feel and adding plug-ins. I am stumped with the following problem. I would like to have the blog logo be a hyperlink so that when it is clicked on, it takes you to the home page. The image is in the CSS as a background image. Can you make a background image act as a hyperlink? If not, what are my options? I assume I can move it to the header file and treat it like any image. Thanks, Tom

Viewing 4 replies - 1 through 4 (of 4 total)
  • I’d like an answer to your question, as well.

    Here’s what you can do:

    Add the following code into (usually) the div with the id of header in (usually) header.php:

    <div id="header" onclick="location.href='';" style="cursor: pointer;">

    This is javascript; the only time it won’t work is if someone has js disabled while browsing – probably not a big enough percentage to worry about.

    If your header graphic is in some other id in the css, just find the appropriate div in the header.php (usually) file.

    [You won’t of course add the whole section there – only the part which comes after id=”header”….]

    If you prefer a non-javascript option, you can do the following.

    Presuming you have an existing class defined for your header image which is something like this:

    .header_logo {
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    margin-top: 8px;
    float: left;
    height: 145px;
    width: 870px;

    You define two new classes:

    .header_logo a {
    display: block;
    float: left;
    height: 145px;
    width: 870px;
    outline: none;
    .header_logo a span {
    display: none;

    And then, in the HTML where the class is called, add a hyperlink to some dummy text within span tags. The dummy text will be invisible on the page, and a block the size of your graphic will be clickable:

    <div class=”header_logo”>
    <a href=""
    title="There's no place like…">
    <span>This links home, dear screen reader</span>

    If you want to know why this works, I blogged it here:

    Thanks, vkaryl. This helped settle the problem.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Hyperlink from Background Image in CSS’ is closed to new replies.