Задать вопрос
Hanatos
@Hanatos
Веб-Дизайнер
html

Как вставить ссылку по средству z-index в background сайта?

Примеры таких background:
1. stopgame.ru
2. igromania.ru
3. kanobu.ru

Мой сайт: geekninja.ru
Нужен такой же стиль фона с ссылкой.
Фон уже точно расположен, осталось добавить грамотно ссылку кусочками z-index

Сейчас код такой:

CSS:
#branding_link {
    width: 100%;
    height: 300px;
    position: relative;
	background: url("./images/bg.jpg") no-repeat 25% 0% #000000;
	z-index: 1;
}


HTML:
<a href="http://buy.thewitcher.com/?lang=ru&country=US" target="_blank" id="branding_link"></a>
  </br>
    </br>
	  </br>
	    </br>
		  </br>
		    </br>
			  </br>
			    </br>
				  </br>
				    </br>
					  </br>
					    </br>
						  </br>
						    </br>
							  </br>


И чем заменить этот бр ? Может отступ снизу ? Только кода не знаю.
  • Вопрос задан
  • 600 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
yurzui
@yurzui
  1. br убирайте, вместо него можно использовать следующий код 
    body.boxed #page-wrapper {
margin: 200px auto 0;
}
  2. для ссылки добавьте 
    #branding_link {
position: fixed;
background-size: cover;
height: 750px;
}
  3. с body уберите background
  4. Для основного контейнера добавьте
    body.boxed #page-wrapper {
position: relative;
z-index: 2;
}

Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 2
Antiless
@Antiless
Обычный див там, с ссылкой - смотрите фаербагом, например
Ответ написан
2 комментария
2 комментария
aliencash
@aliencash
Партизан
Во-первых height: 300px сработает только для блочного элемента, а по умолчанию строчный. Т.е. добавьте c #branding_link display: block; и можете смело удалять свои br'ы.

Во-вторых, у вас дублируется картинка фона, вы ее присваиваете и body, и #branding_link. Попробуете поскролить страницу, поймете в чем дело.
Нужно убрать фон из body, увеличить выстоту #branding_link. А так же дать ему z-index меньше инфомационной области страницы.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дописать функцию на Flutter, работа с yandex map kit
20 апр. 2024, в 04:18
3000 руб./за проект
Английская версия для сайта на WordPress
20 апр. 2024, в 03:34
8000 руб./за проект
Доработать клиентское приложение для GTA 5 на C#
20 апр. 2024, в 00:51
1000 руб./за проект
Ещё заказы