Title: Hyperlink from Background Image in CSS
Last modified: August 18, 2016

---

# Hyperlink from Background Image in CSS

 *  [ohbearly](https://wordpress.org/support/users/ohbearly/)
 * (@ohbearly)
 * [19 years, 2 months ago](https://wordpress.org/support/topic/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)

 *  [danielek](https://wordpress.org/support/users/danielek/)
 * (@danielek)
 * [19 years, 1 month ago](https://wordpress.org/support/topic/hyperlink-from-background-image-in-css/#post-529827)
 * I’d like an answer to your question, as well.
 *  [vkaryl](https://wordpress.org/support/users/vkaryl/)
 * (@vkaryl)
 * [19 years, 1 month ago](https://wordpress.org/support/topic/hyperlink-from-background-image-in-css/#post-529828)
 * 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”….]
 *  [brianfit58](https://wordpress.org/support/users/brianfit58/)
 * (@brianfit58)
 * [18 years, 4 months ago](https://wordpress.org/support/topic/hyperlink-from-background-image-in-css/#post-529910)
 * 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](http://blog.brian-fitzgerald.net/?p=252)
 *  [rahawa](https://wordpress.org/support/users/rahawa/)
 * (@rahawa)
 * [18 years, 3 months ago](https://wordpress.org/support/topic/hyperlink-from-background-image-in-css/#post-529925)
 * 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.

## Tags

 * [background](https://wordpress.org/support/topic-tag/background/)
 * [hyperlink](https://wordpress.org/support/topic-tag/hyperlink/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 5 participants
 * Last reply from: [rahawa](https://wordpress.org/support/users/rahawa/)
 * Last activity: [18 years, 3 months ago](https://wordpress.org/support/topic/hyperlink-from-background-image-in-css/#post-529925)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics