WordPress.org

Ready to get started?Download WordPress

Forums

Hyperlink from Background Image in CSS (5 posts)

  1. ohbearly
    Member
    Posted 7 years ago #

    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

  2. DanielEK
    Member
    Posted 7 years ago #

    I'd like an answer to your question, as well.

  3. vkaryl
    Member
    Posted 7 years ago #

    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='http://www.yoursite.com';" 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"....]

  4. brianfit58
    Member
    Posted 6 years ago #

    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="http://blog.brian-fitzgerald.net"
    title="There's no place like…">
    <span>This links home, dear screen reader</span>
    </a>
    
    </div>

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

    http://blog.brian-fitzgerald.net/?p=252

  5. rahawa
    Member
    Posted 6 years ago #

    Thanks, vkaryl. This helped settle the problem.

Topic Closed

This topic has been closed to new replies.

About this Topic