How to insert a link by means of z-index in the background of the site?

Question

css

Examples of such backgrounds:
1. stopgame.ru
2. igromania.ru
3. kanobu.ru
My site: geekninja.ru
We need the same background style with a link.
The background is already exactly located, it remains to add the link correctly with z-index pieces.
Now the code is this:
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>

And how to replace this br? Maybe an indent from the bottom? I just don't know the code.

Answer 1

1. remove br, you can use the following code instead

   body.boxed #page-wrapper {
   margin: 200px auto 0;
   }

2. add for link
   

   #branding_link {
   position: fixed;
   background-size: cover;
   height: 750px;
   }

3. remove background from body
   
4. For the main container, add
   

   body.boxed #page-wrapper {
   position: relative;
   z-index: 2;
   }

   
   

Answer 2

The usual div is there, with a link - see the firebug, for example

Answer 3

First, height: 300px will only work for a block element, and the default is inline. Those. add c #branding_link display: block; and you can safely delete your br's.
Secondly, you duplicate the background image, you assign it to both body and #branding_link. Try to scroll the page, you will understand what's going on.
We need to remove the background from the body, increase the #branding_link height. And also give it a z-index less than the info area of ​​the page.