CSS centrée sur l'image d'en-tête

J'ai une image d'en-tête qui se répète à travers l'écran, de sorte que peu importe la résolution de l'écran de l'en-tête est toujours tendu à 100%, j'ai placé l'image à l'intérieur d'une enveloppe de div.
Au-dessus de ce DIV, je voudrais aussi, le "logo" de sorte qu'il est toujours centrés sur le haut de l'écran.

J'apprécie ce qui pourrait être fait d'une autre manière et ont déjà essayé un peu d'avoir le logo sur le dessus de la tête dans photoshop, bien que je ne pouvais pas obtenir l'image centrée sur que je serais voulu.

Veuillez trouver mon code ci-dessous:

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

Aussi, je suis conscient du fait que les propriétés de margin-left:auto; etc. Même si je serais reconnaissant si quelqu'un pourrait expliquer comment les utiliser de façon appropriée ici.

Merci!

OriginalL'auteur dyatesupnorth | 2012-07-17

  1. 8

    Je pense que c'est ce que vous avez besoin si je suis à vous comprendre correctement:

    <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;
}
    absolument merveilleux!! et merci à tous ceux qui m'ont donné les réponses que j'ai tout essayé et ils sont tous un peu(!) proche.. cependant billy douves cloué à la perfection, encore une fois je vous remercie!
    Yates - Heureux d'être à votre service 🙂

    OriginalL'auteur Billy Moat

  2. 3

    Si vous définissez la marge margin:0 auto l'image sera centrée.

    Cela donnera haut + bas une marge de 0, et que gauche et droite d'une marge de "auto". Depuis la div a une largeur (200px), l'image sera 200px de large et le navigateur de l'auto de définir la marge de gauche et droite à la moitié de ce qui est à gauche sur la page, qui va entraîner l'image soit centrée.

    OriginalL'auteur Fermin

  3. 3

    vous n'avez pas besoin de définir la largeur de la tête dans la css, il suffit de mettre l'image d'arrière-plan en tant que centre d'aide de ce code:

    background: url("images/logo.png") no-repeat top center;

    ou vous pouvez simplement utiliser img balise et de mettre align="center" dans le div

    OriginalL'auteur haynar