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