Centre une image d'en-tête, indépendamment de la taille de la page

Ma page web a une image d'en-tête, qui reste toujours en haut de la fenêtre. Lorsque la fenêtre est maximisée l'image d'en-tête est centré, mais lors de la visualisation dans une petite fenêtre (ou un smart-phone browser) l'en-tête est à gauche de la fenêtre, et le côté droit recadrée. Parce que l'en-tête div est plus large que le contenu de la page, à l'horizontale barre de défilement s'affiche lorsque la fenêtre est plus petite que l'en-tête, pas de la page.

Je voudrais l'en-tête de l'image afin de la centrer sur la page, en tout temps, avec les deux côtés gauche et droit d'être recadrée si la fenêtre est plus petite que l'en-tête. Aussi l'horizontale de la barre de défilement pour être activée uniquement si la largeur de la fenêtre est inférieure à la largeur de la page.

Cette image pourrait l'expliquer plus clairement:

Centre une image d'en-tête, indépendamment de la taille de la page
http://postimage.org/image/49ne3k3o/

Mon code pour l'instant:

CSS:

#headerwrap {
    position: relative;
    width: 998px;
    height: 100px;
    margin: 0 auto;
    pointer-events: none;
}
#header{
    position: fixed;
    top: 0;
    width: 998px;
    margin: 0;
    background: url('../images/top.png') no-repeat;
    height:100px;
    z-index: 1;
    pointer-events: none;
}

HTML et mise en œuvre:

<div id="headerwrap"\>
<div id="header">
</div>
</div>

(la page est 690px large, la tête est 998px)

Toute aide serait grandement appréciée.

OriginalL'auteur James | 2011-06-25