HTML/CSS: Création d'une div qui ne déclenche pas une barre de défilement horizontale si elle est plus large que la taille de l'écran

Question

J'essaie d'améliorer la compatibilité utilisateur d'un site pour les moniteurs 800 x 600px.

J'ai un div 'headerbackground' qui est 900px de large, et ne contient rien d'autre qu'une image de fond. Le reste du site est imbriqué dans ce div, avec une largeur de 790px.

Ce que je voudrais faire est de montrer la pleine 900px « headerbackground » div si la fenêtre du navigateur est supérieure à 900px, mais pas déclenchement d'une barre de défilement horizontale dans le navigateur si la résolution d'écran est compris entre 790 & 900px. Je suis conscient que cela peut être facilement réalisé avec une image "background" centrée sur l'étiquette du corps, mais ce n'est pas une option faisable dans ce cas parce que l'image d'arrière-plan actuelle du corps a un arrière-plan horizontal répétitif, et l'image d'arrière-plan de l'en-tête ne se répète pas.

Toutes les suggestions ont apprécié

Edit: image ci-jointe pour plus de clarté.

Answer 1

... A quelques minutes après que je poste, je me débrouille tout seul. Pardon. Dans le cas où quelqu'un d'autre a le même problème:

Donner headerbackground div une largeur de 100%, et une min-largeur la même que les div internes. Centrez l'image de fond div de headerbackground. Enfin, vous aurez besoin d'un hack min-width pour rendre IE 6 heureux.

Answer 2

Si vous utilisez le CSS background-image propriété pour votre « headerbackground div, » et headerbackground est inférieure à la taille de l'image d'arrière-plan, une barre de défilement ne sera pas activé. Au contraire, l'image d'arrière-plan sera tronquée.

Mise à jour:

Vous devriez être en mesure de rendre votre headerbackground div non-largeur fixe afin qu'elle remplisse tout le corps. Ensuite, vous pouvez centrer son image d'arrière-plan. Essayez ceci pour votre CSS:

body { background-color: blue; } 
#headerbackground { 
    background-color: red; 
    background-image: url(your/url.png); 
    background-position: center top; 
    margin-left: auto; 
    margin-right: auto; 
} 
#content { 
    background-color: green; 
    width: 790px; 
    margin-left: auto; 
    margin-right: auto; 
}