КодSEOБлогИное

Как установить рекламу «Брендированная подложка» на сайте

«Брендированной подложкой» называют огромное изображение-объявление в виде фона сайта, например, тут рекламируется сериал «Морские дьяволы». Если на него нажать, то откроется другая страница с подробностями.

Площадь ссылки = площади фоновой картинки

<style>
a {
  position: absolute; /* ссылка не влияет на родителей и соседей */
  top: 0;
  left: 0;
}
a img {
  width: 100%;  /* ширина картинки = ширина сайта, изображение может доходить только до половины страницы */
}
div {
  position: relative;
  width: 50%;
  height: 100em;
  margin: 0 auto;
  background: #fff;
}
</style>

<body>
  <a href="#new" target="_blank" title="Ссылка"> <!-- ссылка обязательно находится перед блоком -->
    <img src="http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg" alt="Ромайки">
  </a>
  <div></div> <!-- желательно, чтобы блок имел общих с ссылкой родителей -->
<body>

Весь задний фон страницы кликабельный

<style>
#linkFon {
  position: fixed; /* ссылке задано фиксированное позиционирование, она занимает всё доступное пространство документа */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg) top / cover no-repeat #ddd;  /* другие настройки background */
}
#content {
  position: relative;
  width: 50%;
  height: 40em;
  margin: 0 auto;
  background: #fff;
}
</style>

<body>
  <a href="#new" target="_blank" title="Ссылка" id="linkFon"></a>
  <div id="content"></div>
</body>
◄▲►
Все комментарии