CSS : image de fond décalée en résolution 1024

sebnight

21 Jun 2007 à 10:37

Bonjour à tous,

Je cherche à faire un design centré. Il y a donc un bloc de contenu central, de taille 1024px. En arrière-plan sur la page j'ai un motif répété.

Le problème est que dans le design de l'arrière-plan il y a aussi une image qui "déborde" sur la gauche : même si mon contenu central ne fait que 1024 (et suffit donc pour uen résolution standard 1024 sans ascenceur), la présence de cette image de fond "élargit" la page et je ne sais pas comment l'intégrer pour que cela ne gène pas l'affichage.

Une image vaut mieux qu'un long discours :

Je n'ai pas trouvé d'exemple pour répondre à ce problème : y a t'il une solution ? J'ai conscience de ne pas êter très clair, n'hésitez donc pas à me demander des précisions... Smiley confused

fvsch

21 Jun 2007 à 11:07

sebnight a écrit :
Il y a donc un bloc de contenu central, de taille 1024px.

Première erreur. Pour que ça tienne en 1024, ne pas dépasser les 980px de large.

Pour le reste, une piste :

[b]HTML :[/b]
<body>
<div id="faux-body">
<div id="global">
...
</div>
</div>
</body>

[b]CSS :[/b]
body {
margin: 0;
padding: 0;
background: ...; /* le motif de fond qui se répète */
}
div#faux-body {
padding-top: ...px;
padding-bottom: 100px;
background-image: ...; /* élément de décoration en fond */
background-position: center bottom;
}
div#global {
width: 980px;
margin: 0 auto;
padding: 1px 0;
/* etc. */
}

L'image de fond décorative est à faire de sorte que centrée horizontalement la partie visible soit placée comme voulu. Ou sinon il y a peut-être moyen de placer directement l'image de fond décorative là où on le souhaite... faudrait que je révise les possibilités de background-position.

CSS et mise en forme, CSS3

CSS : image de fond décalée en résolution 1024