Вы здесь

пример логотипа

В этом уроке, я расскажу небольшой секрет, как сделать логотип фоном. Вы спросите зачем это нужно. К чему такие сложности. Объясню.
Во-первых, уменьшается скорость загрузки сайта.
Во-вторых, уменьшает HTML разметку скомпилированной страницы.
Ну и в третьих, это дает плюсы для SEO продвижения.
Для начала определим HTML разметку:

<div id="logo">
<a href="/" title="Название сайта" rel="home">
  <span></span>
</a>
</div>

Как видите, здесь всё просто. Делаем div контейнер в котором будет логотип. Затем идет ссылка, и уже потом пустой тег span. Именно тег span и показывает нам логотип. Вы спросите, почему бы не сделать логотип просто в теге a. Я тоже думал об этом. Но как правило, при клике на логотип, человек должен попадать на главную страницу сайта.
Но зачем ему кликать на логотип, если он уже находится на главной странице? Именно поэтому на главной странице, клик на логотип ни к чему не приведет. Так как тега a больше нет на логотипе. Но отображать логотип в любом случае надо на сайте. За это и отвечает тег span
Далее необходимо сделать CSS стиль для нашего логотипа:

#logo span {
    background-image: url("images/logo.gif");
    background-position: left top;
    display: block;
    height: 150px;
    width: 201px;
}

Наш логотип в теге span стал блоком. Мы определили для него высоту, ширину и прописали фоновое изображение.
Такая конструкция имеет дополнительные плюсы. При наведении на логотип, можно изменять фоновое изображение на другое, без всяких скриптов.
Для этого мы добавим еще немного CSS волшебства.

#logo a:hover span {
    background-image: url("images/logo2.gif");
}

Так как ширина и высота уже прописана в предыдущем CSS правиле, то мы не будем дублировать эти строки повторно (мы же все с вами за оптимизированный код)
Если вы знакомы со спрайтами, то можно использовать это же изображение, только изменить позицию фона.
CSS код будет выглядеть уже таким образом:

#logo a:hover span {
    background-position: left bottom;
}

Спрайты увеличивают скорость загрузки изображений, особенно это важно, когда меняется изображение при наведении курсора.