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

Question

[Вачаган Даниелян]

Примеры таких 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>

И чем заменить этот бр ? Может отступ снизу ? Только кода не знаю.

Answer 1

[Алексей Зуев]

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;
   }

   
   

Comments

[Вачаган Даниелян]

ваше решение интересное, но можно как-то по порядку, что и куда, я ничего не понял.
Что в css прописать, а что в html.
Спасибо.

[Алексей Зуев]

Hanatos: стучитесь в скайп

[Вачаган Даниелян]

В итоге, Алексей решил мой вопрос так:

#branding_link {
background: #000000 url("./images/bg.jpg") no-repeat scroll 25% 0 / cover ;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 50px;
width: 100%;
z-index: 1;
}

и еще дополнительно

body.boxed #page-wrapper {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
margin: 200px auto 0;
max-width: 1200px;
position: relative;
z-index: 2;
}

Спасибо Алексею!

Answer 2

[Antiless]

Обычный див там, с ссылкой - смотрите фаербагом, например

Comments

[Вачаган Даниелян]

смотрел, но я мало понимаю в css. Поэтому ищу готовый вариантик решения. А фаербагом я и так все смотрю, этого мало.

[Вачаган Даниелян]

Спасибо, уже решили.

Answer 3

[Андрей Федоров]

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

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

Comments

[Вачаган Даниелян]

Спасибо!