Фон сайта как ссылка (html + css) | Все что вы хотели знать о хостинге и сайтостроении

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


Рубрика: CSS, HTML

Наверняка многие видели сайты у которых в фоне размещено изображение и если кликнуть по нему то происходит переход по ссылке на другой сайт. Сегодня я расскажу как это можно сделать используя только возможности 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 устанавливаем выше чем у ссылки.

 

Теги: , ,
Если вам понравилась статья или была полезна, поделитесь ею с друзьями: