Кликабельный фон / подложка для сайта

Кликабельный фон сайтаДля одного проекта попросили реализовать кликабельный фон (подложку) сайта, которую вы могли встречать на крупных порталах. Такой рекламный брендинг позволяет максимально привлечь внимание посетителя и намного эффективнее баннера. В блоге уже публиковались статьи про большую фоновую картинку для сайта и создание изображения на весь экран но все эти варианты были не кликабельные. Поэтому пришлось искать новое решение в сети. Я определил 3 возможных метода решения задачи.

Кликабельный фон через CSS

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

<html>
<head>
<style type="text/css">
.home {
	background:url('sea.jpg');
	background-position:top center;
	background-repeat:no-repeat;
	background-attachment:fixed;
}
 
#ad_bg {
	top: 0;
	left:0;
	position: absolute;
	display: inline;
	width: 100%;
	cursor: pointer;
	text-decoration: none;
}
 
.main-content-block {
	position: relative;
	z-index: 1000;
	margin: 0pt auto;
	width: 900px;
	border: 1px solid red;
	background: #fff;
}
 
</style>
</head>
<body class="home">
	<a style="height:1200px;" id="ad_bg" href="http://design-mania.ru" target="_blank">&nbsp;</a>
	<div class="main-content-block">
		Text
	</div>
</body>
</html>

Здесь сразу после класса body добавляется тег ссылки A с нужным адресом для перехода. В стилях задаем выключение подчеркивания и ширину 100%. Высота элемента 1200 пикселей прописывается в HTML. Фон цепляется для BODY.

Параметр background-attachment: fixed не обязательный, он фиксирует фоновую картинку при прокрутке, если вам нужно. Важно, что в блоке контента задается тип позиционирования position: relative. Вот как в итоге это выглядит:

Кликабельный фон через CSS

Здесь в примере фоновая картинка выбрана слишком большая, поэтому такой масштаб. Также можно задать какой-то цвет фона и изображение для брендинга снабдить плавным полупрозрачным переходом. Дабы сохранить адаптивность автор метода предлагает добавлять DIV вокруг основного контента и задавать ему margin auto – вот его пример.

В данном коде есть один важный момент. Если вы указали высоту 1200 пикселей для тега ссылки А, то при прокрутке вниз линк будет становиться не активным. Это пригодится, когда фоновая картинка не фиксированная, а плавно переходит в фон. В противном случае получается, что при прокрутке на фоне пользователь видит изображение, но без ссылки. Дабы это исправить можно использовать для идентификатора #ad_bg следующий код:

#ad_bg {
	top: 0;
	left:0;
	display: inline;
	width: 100%;
        height: 100%;
        position: fixed;
	cursor: pointer;
	text-decoration: none;
}

Здесь мы добавили высоту и изменили позиционирование блока на fixed. Также нужно убрать style=”height:1200px;” из HTML кода.

Кликабельный фон через Javascript

Намеки на решение кликабельной подложки через Javascript нашел в двух заметках. Проблема в том, что оба варианта на практике не заработали. С отображением фона все прошло ок, а вот переходы с помощью Javascript не выполнялись. В первом случае использовался такой код:

Во втором варианте у автора вообще было много ошибок по коду. В итоге вышло что-то вроде:

<html>
<head>
<style type="text/css">
.ad-banner-image {
position: absolute;
display: block;
left: 0pt;
z-index: 1;
width: 100%;
height: 1252px;
background: url('sea.jpg') no-repeat scroll center top transparent; top: 0pt; cursor: pointer;
 
}
 
.main-content-block{
position: relative;
z-index: 1000;
margin: 0pt auto;
width: 900px;
border: 1px solid red;
background: #fff;
}
</style>
 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 
<script type="text/javascript">
	$(document).ready(function() {
		$("div.ad-banner-image").click(function(event){
		window.open('http://design-mania.ru');
		return false;	
		});
	});
</script>
</head>
<body>
	<div class="ad-banner-image"></div>
	<div class="main-content-block">
		Text
	</div>
</body>
</html>

Для работы этого метода нужно было подключить jquery, но все равно никакого результата это не дало. По логике, при клике на фоновую картинку, должно срабатывать открытие нового окна, но это не происходит.

Реализовать получилось немного видоизменив вызов скрипта.

<html>
<head>
<style type="text/css">
.ad-banner-image {
position: absolute;
display: block;
left: 0pt;
z-index: 1;
width: 100%;
height: 1252px;
background: url('sea.jpg') no-repeat scroll center top transparent; top: 0pt; cursor: pointer;
}
 
.main-content-block{
position: relative;
z-index: 1000;
margin: 0pt auto;
width: 900px;
border: 1px solid red;
background: #fff;
}
</style>
 
</head>
<body>
	<div class="ad-banner-image" onclick="window.open(this.href, '_self'); window.open('http://design-mania.ru'); return false;"></div>
	<div class="main-content-block">
		Text
	</div>
</body>
</html>

Для события onclick был добавлено открытие нового окна со ссылкой. Можно поэкспериментировать с Javascript, но у меня решить задачку так и не получилось. Учитывая, что последний вариант работает, я бросил это занятие.

WordPress плагины для кликабельного фона

В процессе поиска решения кликабельного фона нашел два WordPress плагина, которые, судя по описанию, позволяют решить эту задачу.

Background Manager

Плагин Background Manager

В описании модуля сказано, что он показывает случайную картинку для каждого нового пользователя, а также имеет возможность сделать слайдшоу. Допускается не только загрузка картинки, но и использование простых палитр. В настройках есть много полезных опций: определение позиционирования картинки, задание фона для конкретной страницы/поста, а также добавление ссылки. Последний пункт как раз и решает нашу задачу. Подробнее о плагине можно почитать тут.

WP-Backgrounds Lite

Плагин WP-Backgrounds Lite

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

Если вы знаете еще какие-то варианты решения кликабельного фона для сайта, делитесь ими в комментариях.

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        
Похожие по тематике посты:

Комментариев - 5 для поста Кликабельный фон / подложка для сайта
  1. ]]> Остап ]]> (February 4, 2016)

    Background Manager позволяет установить фон для каждой страницы или записи, можно выбрать 1 из предложенных вариантов или использовать картинку. Невозможно вставить ссылку с помощью этого плагина.

    В WP-Backgrounds Lite есть поле для ссылки, но почему-то не работает.

  2. ]]> Tod ]]> (February 5, 2016)

    Остап, я использовал только Background Manager, там со ссылкой специфическая ситуация. Можно активировать некий элемент [ + ] в самом низу страницы, на который и вешается ссылка. Что-то вроде “почитать подробнее”. Нужно будет дописать об этом в статье. С WP-Backgrounds Lite не работал, к сожалению.
    Спасибо за дополнение к статье, плохо, конечно, что модули такие корявые. Возможно, сейчас есть и другие плагины, вопрос рассматривал полгода назад где-то.

  3. ]]> Tod ]]> (February 5, 2016)

    Остап, по поводу второго плагина нашел – some features (i.e. the fullsize background link) will not work with all themes. Зависит от структуры шаблона.
    По Background Manager, кстати, двоякое ощущение. Раз я делал полноценный обзор модуля, то наверняка тогда линк с фона работал. Поскольку я искал подходящее решение для одной задачи. Возможно, для новых версий ВП или некоторых шаблонов, он глючит. В любом случае, теперь это уже не особо актуально, т.к. Background Manager у меня не получается найти на официальном сайте.

  4. ]]> Андрей ]]> (April 27, 2016)

    Может я что то не так делаю, но у меня получается весь сайт кликабельный. Как исправить. Пробую сделать по первому варианту?

  5. ]]> Tod ]]> (April 27, 2016)

    Андрей, сложно давать советы на расстоянии. Тут 2 варианта: 1) сделать еще раз все настройки с самого начала внимательно. 2) Если внедряете на готовом сайте, добавлять код постепенно и по ходу правок смотреть что работает, что нет – так сможете найти проблему. В коде опция z-index = 1000 располагает основной блок контента main-content-block поверх основных, в том числе и фона. Если контент кликабельный, то можно поискать ошибку в этом направлении.

Оставить комментарий
для статьи Кликабельный фон / подложка для сайта