Фон сайта как ссылка (html + css)

15.01.2015 | Просмотров этой темы: 10 336

Наверняка многие видели сайты у которых в фоне размещено изображение и если кликнуть по нему то происходит переход по ссылке на другой сайт. Сегодня я расскажу как это можно сделать используя только возможности HTML и CSS.

Для начала набросаю пример каркаса:

...
<body>
<a href="http://exmple.com" id="bglink"></a>
<div id="page">
Контент
</div>
</body>
...

Как видим, ссылку мы располагаем в самом верху, в отдельном DIV.page идет сам контент сайт (или что у вас там в дизайне).

Теперь нам это все нужно оформит стилями:

body{
background: url('/bg-image.png') 0 0 repeat;
}

#bglink{
  display:block;
  height:100%;
  width:100%;
  position:fixed;
  left:0;
  top:0;
  z-index:0;
  text-indent:-5000em;
}

#page {
  position:relative;
  z-index:10;
}

В body размещает картинку для фона. Ссылку оформляем так что-бы она занимала весь экран и задаем слой ниже чем у DIV.page, соответственно у DIV.page z-index устанавливаем выше чем у ссылки.

Читайте похожие темы:

Рубрика: прочее сео
Некоторые статьи скопированы с посторонних ресурсов, и мы никаким образом не претендуем на них. И если владелец материала не желает видеть его у нас, может сообщить об этом в администрацию сайта. Если это ваша статья - напишите Нам, и мы поставим на Вас ссылку (оставьте координаты для связи)

Оставить комментарий

..

Онлайн журнал для всех — дофоллоу блог девушки