Código html, por link na imagem do header pelo code

[TheDomo]

Ola estou com uma duvida em um código, e simples queria por uma imagem que fica no header(ela ja está tenho o código) porém queria que ela possui link (Ao clicar nela ser redirecionado para outra pagina)

header{
position: relative;
overflow:hidden;
margin: auto;
background:url((https://1.bp.blogspot.com/-_xP01C9Dc0c/V3aTOjhARuI/AAAAAAAAAFc/H2XLn8dUIdw8Wgw6bewY_6GZFZMACaRPgCLcB/s1600/Sem%2BT%25C3%25ADtulo-4.png) no-repeat center bottom;
height: 270px;
margin-top:0px;
width: 100%;}
.gambar-neptune{
position: absolute;
top:0px;
right: 0px;
background:url(https://4.bp.blogspot.com/-56VNHLVfvdA/V3ac9VZWP7I/AAAAAAAAAGM/aDl9bHGDR8UKnACm3iyRTyIYRe6IAMRIwCLcB/s1600/header.png) no-repeat center center;
width: 561px;
height:752px;
z-index: 1;}

 

a parte que queria( a imagem ) e esse código

background:url(https://4.bp.blogspot.com/-56VNHLVfvdA/V3ac9VZWP7I/AAAAAAAAAGM/aDl9bHGDR8UKnACm3iyRTyIYRe6IAMRIwCLcB/s1600/header.png) no-repeat center center;
width: 561px;
height:752px;
z-index: 1;}

Alguém saberia qual seria o code para colocar ai?

procurei em diversos sites e fórum mas nenhum foi útil e resolveu o meu problema  

[DiF]

@TheDomo Olá,  primeiramente seja bem vindo em nosso Fórum do Clube do Hardware.

 

O que você postou aí é somente o CSS.

 

Para acrescentar um link no seu header com imagem em background, você precisa colocar a marcação de hipertexto dentro do elemento header cujo a classe é .gambar-neptune  e então definir no CSS com display block e com as mesmas dimensões do header(width e height)

Isso fará com que o elemento <a> pegue nível de bloco preenchendo todo o elemento pai

 

Veja o exemplo prático aqui: https://jsfiddle.net/hn8e4r1v/

 

Contudo podes fazer apenas colocando o elemento <a> e o elemento  de header dentro dele: https://jsfiddle.net/hn8e4r1v/1/

 

 

 

[TheDomo]

Poderia me dar uma explicação melhor, kkk  não entendi queria saber onde colocar e como colocar os code, sou muito iniciante em programação

 

Ah e Obrigado pelas boas vindas ^-^

[DiF]

@TheDomo Basicamente não tenho muito o que explicar.

Pois isso é uma questão mais básica das básicas do html.

 

Um link (marcação de hipertexto )nada mais é do que o uso da tag <a>  em conjunto com o atributo  "href"

Ou seja,

<a href="http://www.google.com">Google </a>

Este é um link.

Uma uma imagem linkada seria:

<a href="http://www.google.com/">
   <img src="http://www.seusite.com.br/imagem.jpg" />
</a>  

Agora no seu caso, você não tem uma imagem inserida no html, mas sim uma imagem inserida como background de um elemento DIV.

Então para isso você precisa definir para o elemento em si que ele fique a nível de bloco. ou seja, ocupam toda largura disponível no elemento e criam uma linha invisível antes e depois de si próprio.

 

Para isso você deixa  setado no CSS que o elemento <a> responsável pelo link deve ter o mesmo width e height do elemento DIV e informar que o atributo "display" tenha o valor "block".  Este é o jeito convencional.

 

<div class="link">
  <a href="#"></a>
</div>

No exemplo acima, por CSS você define que o <a> vai ter a mesma altura e largura do elemento DIV e que ele seja nível de bloco

 

 

No HTML 5, já permite que não precise definir o elemento <a> como nível de bloco.. apenas colocando elemento DIV dentro do elemento <a>

 

Como neste exemplo:

<a href="http://www.google.com.br">
  <div class="header"></div>
</a>  

é por aí. ficou mais claro?

 

Deixo aqui alguns links de referência para você estudar:

http://www.kadunew.com/blog/css/elemento-inline-e-nivel-de-bloco

http://www.w3schools.com/html/html_links.asp