Imagem de cabeçalho centrada em CSS
eu tenho uma imagem de cabeçalho que se repete através do ecrã, de modo que, independentemente da resolução do ecrã, o cabeçalho é sempre esticado 100%, eu coloquei a imagem dentro de um div wrapper. Por cima desse DIV, gostaria também de colocar o "logótipo" de tal forma que esteja sempre centrado no topo do ecrã.
eu aprecio que isso poderia ser feito de outra maneira e já tentei apenas ter o logo em cima do cabeçalho no photoshop embora eu não poderia ter a imagem centrada como eu gostaria de desejar.
por favor, Encontre o meu código abaixo:
HTML:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" width="1000" height="200" alt="logo" />
</div>
</div>
CSS:
#wrapperHeader{
position: relative;
background-image:url(images/header.png);
}
#header{
left: 50%;
margin-left: -500px;
background:url(images/logo.png) no-repeat;
width:1000px;
height:200px;
}
Também, eu estou ciente das propriedades da margem-esquerda: auto; etc. Embora eu agradecesse se alguém pudesse explicar como usá-los adequadamente aqui.
Obrigado!3 answers
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
</div>
div#wrapperHeader {
width:100%;
height;200px; /* height of the background image? */
background:url(images/header.png) repeat-x 0 0;
text-align:center;
}
div#wrapperHeader div#header {
width:1000px;
height:200px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:; /* the width of the logo image */
height:; /* the height of the logo image */
margin:0 auto;
}
Se você definir a margem para ser {[[0]} a imagem será centrada.
Isto dará ao topo + ao fundo uma margem de 0, e à esquerda e à direita uma margem de 'auto'. Uma vez que o div tem uma largura (200px), a imagem será de 200px de largura e o navegador irá definir automaticamente a margem esquerda e direita para metade do que está à esquerda na página, o que resultará na imagem sendo centrada.
Não precisa de definir a largura do cabeçalho no css, basta colocar a imagem de fundo como centro, usando este código:
background: url("images/logo.png") no-repeat top center;
Ou pode apenas usar img marca e colocar align="center" no div