HTML/CSS -- Criando um banner / header

Tenho uma imagem horizontal como GIF e JPG. É algo que eu fiz com tinta -- um logotipo de texto com uma imagem em um fundo sólido.

Estou tendo um monte de problemas tentando fazê-lo exibir como um banner/cabeçalho.

Até agora, só consigo que o fundo sólido apareça. O texto / logótipo desaparece misteriosamente. O fundo sólido se estende para a tela cheia sobre a minha imagem de fundo, e eu quero isso, mas obviamente, com o meu texto/logotipo aparecendo.

Isto é o código que estou a usar: 

<style>
body {
  background: url("mybackgroundimage.gif") repeat;
}
#banner {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 200px;
  z-index: -1;
}
</style>
</head>
<body>
  <img id="banner" src="mybannerimage.gif" alt="Banner Image"/>
</body>
Acho que pode haver algo de errado com a minha imagem. Eu tentei isso usando uma imagem diferente, e funcionou, mas meu texto foi esticado.

Como é que crio um banner com um Logótipo que não se estica quando uso este código??

Author: cagatayodabasi, 2013-08-25
Source

5 answers

Tem um tipo o:

[5]: height: 200x;

E deve ser: height: 200px; verifique também o url da imagem; ele deve estar no mesmo diretório que parece.

Também não utilize " px "em valores nulos (também conhecidos por "0"). 0px, 0em, 0% ainda é 0. :)

top: 0px;

É o mesmo com: 

top: 0;
Boa Sorte!
 4
Author: RGLSV, 2013-08-24 21:03:09

Remover o valor do Índice Z.

Também recomendo esta abordagem.

HTML: 

<header class="main-header" role="banner">
  <img src="mybannerimage.gif" alt="Banner Image"/>
</header>

CSS: 

.main-header {
  text-align: center;
}
Isto vai centralizar a tua imagem com um alongamento. Você pode ajustar o preenchimento conforme necessário para dar - lhe algum espaço em torno de sua imagem. Uma vez que este está no topo de sua página você não precisa forçá-lo lá com posição absoluta a menos que você quer que seus outros elementos para ir por baixo dele. Nesse caso, você provavelmente iria querer posição: fixo; de qualquer forma.
 2
Author: Jeffpowrs, 2013-08-24 21:29:55

Remover o posição: absolute; atributo no estilo

 1
Author: Karel B., 2014-10-24 15:31:44

Falta um p à altura do valor.

Deve ser Altura: 200 * p * x

 0
Author: Stuart Miller, 2013-08-24 20:54:57

Para a imagem que não aparece. Abra a imagem no editor de imagens e verifique o type você é provavelmente nomeá-la como "gif", mas a sua gravação em um formato diferente que é uma razão para que o navegador não é capaz de rendê-lo e não está mostrando.
Para a questão de alongamento da imagem, Indique por favor as dimensões actuais de largura e altura em #banner em vez de width: 100%; height: 200px que indicou.

 0
Author: Sanjay Ursal., 2014-09-23 05:50:41