Readding a link to a Page Logo using CSS

Question

I've installed the Social Fixer plug-in to tinker with the CSS of Facebook. I've been doing a decent job and playing with the overall look of it except for one little detail that's been bothering me

I've reached the point where I've decided to change the Facebook logo to a gif I got online and modified. The change is made no problem except that clicking on the logo no longer takes you back to the Facebook homepage.

The change I made is the following:

#pageLogo
{
content:  url('http://i.imgur.com/hrsJAJh.gif');
height: 82%; 
width: auto;
position: relative;
left: -35px;
}

I've tried using background-image: url(...);, but it just puts my new logo behind Facebook's official logo. I realize that using content: url(...); is also changing (i.e. removing) the anchor to the homepage found in:

<h1 id="pageLogo">
    <a data-gt="{"chrome_nav_item":"logo_chrome"}" href="https://www.facebook.com/?ref=logo">Facebook</a>
</h1>

I've tried changing the content of the anchor itself to add the link back to the homepage:

#pageLogo a 
{
background-color: transparent;
content: url('http://www.facebook.com/');
}

#pageLogo a:link 
{
background-color: transparent;
content: url('http://www.facebook.com/');
}

#pageLogo a:visited 
{
background-color: transparent;
content: url('http://www.facebook.com/');
}

#pageLogo a:active 
{
background-color: transparent;
content: url('http://www.facebook.com/');
}

#pageLogo a:hover
{
background-color: transparent;
content: url('http://www.facebook.com/');
}

But it doesn't work and I'm guessing that's because I'm changing the content of the anchor (i.e. the "Facebook" text) and not the actual "href" of that anchor.

I've looked here for anyone with a similar problem and most answers said to modify the HTML or use Javascript instead. With Social Fixer, I am only able to modify the CSS.

I've checked w3 for an attribute for "href" and "data-gt" just in case, but no luck.

Just to reiterate after all this text, I want to change Facebook's logo while keeping the link to the Facebook homepage only using CSS.

Answer 1

The Facebook logo is, at the time of this answer, a background-image of the a link inside the h1#pageLogo, not the background of the element itself. This is why your attempt at changing the background-image resulted in an image behind the logo.

You'd want to change the background-image of the link. Something like:

#pageLogo a {
  background-image: url('http://i.imgur.com/hrsJAJh.gif');
  background-position: top left; /* probably */
  height: "your image height";
  width: "your image width";
}