Чтение ссылки на логотип страницы с помощью CSS

Question

Я установил плагин Social Fixer для работы с CSS в Facebook. Я неплохо справляюсь и играю с внешним видом, за исключением одной маленькой детали, которая меня беспокоит

Я дошел до того, что решил сменить логотип Facebook на гифку, которую я получил в Интернете и изменил. Изменение не вызывает никаких проблем, за исключением того, что нажатие на логотип больше не возвращает вас на главную страницу Facebook.

Я сделал следующее изменение:

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

Я пытался использовать background-image: url(...);, но он просто помещает мой новый логотип позади официального логотипа Facebook. Я понимаю, что с помощью content: url(...); также изменяет (т.е. удаляет) привязку к домашней странице, найденной в:

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

Я попытался изменить содержание самого якоря, чтобы добавить ссылку на домашнюю страницу:

#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/');
}

Но это не работает, и я предполагаю, что это потому, что я изменяю содержание якоря (то есть текст "Facebook"), а не фактический "href" этого якоря.

Я искал здесь кого-нибудь с подобной проблемой, и в большинстве ответов говорилось, что нужно изменить HTML или использовать Javascript. С Social Fixer я могу изменять только CSS.

Я проверил w3 для атрибута "href" и "data-gt" на всякий случай, но не повезло.

Просто чтобы повторить после всего этого текста, я хочу изменить логотип Facebook, сохраняя при этом ссылку на домашнюю страницу Facebook только с использованием CSS.

Answer 1

Логотип Facebook, на момент этого ответа, background-image из a ссылка внутри h1#pageLogo, а не фон самого элемента. Вот почему ваша попытка изменить background-image привело к изображению позади логотипа.

Вы хотели бы изменить background-image ссылки. Что-то вроде:

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