[RÉSOLU] Mise en place d'un background dynamique et étendu

Bonjour,

J'ai créer mon premier site Web sur lequel j'aimerais plus tard publier du contenu, mais pour l'instant je créer la charte graphique. J'ai positionné le background de mon en tête correctement, et maintenant je veut qu'il y est une image de la largeur de ma page qui ce répète a partir de l'image de l'en-tête jusqu'au pied de page.

J'ai donc créer une div avec un id="corpsimg" qui englobe toute ma page sauf l'en-tête et le pied de page. Je ne sais pas si c'est la bonne manière de procéder et vous et je vous demande comment je dois faire avec mon CSS. J'ai un peu de mal avec les position float absolut etc.

Je vous met la partie concernée de mon CSS ci-dessous :

body {
font : 14px calibri, arial, time news roman;
color : #333333;
width: 900px;
margin-left: auto;
margin-right: auto;
padding: 0 50px 0 50px;
border:solid;
}
#enteteimg {
position : relative ;
background-image:url(images/entete.png);
height:180px;
width: 1010px;
margin: -20px 0 0 -60px;
}

#corpsimg {
background-image:url(images/entete.png);
/*ici l'mage ce répète mais elle ne colle pas la gauche de ma page et si je lui affecte une marge ou un padding tout le contenu de la page est également décalé :s */
}
div.article {
margin-top : 20px;
text-align: justify;
}

address.footer {
text-align:center;
width : 50%;
margin : auto;
margin-top: 30px;
}


Je met un aperçus de ce que j'obtient avec le nom des balises pour que vous puissiez vous y retrouver. Ne faite pas attentionau design des images c'est juste pour bien les placer.
Merci d'avance =D

Modifié par doRian07S (29 Dec 2010 - 12:22)

Hello,

Déjà si tu mets ton body à 900px, tu ne pourras pas avoir d'image qui se répète sur toute la largeur de l'écran. Vu que ta div corspimg est à l'intérieur de body, elle s'étirera uniquement sur 900px de large.

Ce qui se fait d'habitude c'est plutôt l'inverse. On applique l'image de fond qui se répète au body, puis par dessus se place le header (avec ou sans image de fond) puis un conteneur de 900px de large pour centrer ton contenu.

Après ça dépend de ce que tu souhaites exactement (ce que je n'ai pas forcément bien compris). Si tu pouvait donner une petite image de ce que tu voudrais ou une page en ligne ça serait utile

Bon courage !

Bonjour,

Merci de m'avoir répondu.
En faite je n'avais jamais fait ça et oui appliqué une image qui ce répète au body et placer par dessus l'en-tête et le pied de page c'est ce qui est de plus logique. Seulement je n'y ai pas penser et j'ai résolu mon problème, je t'invite à aller voir le résultat sur http://sanchez.dorian.free.fr
Donc la prochaine fois c'est ce que je ferai
Par contre si tu as le temps de regarder mon CSS (le 2éme style_position) pour voir si j'ai fait les choses convenablement même si il n'y a pas de règle comme le XHTML, ce serait pas mal car parfois je doit bien m’embêter à faire des truks qui sont en faite plus simple avec d'autre balise.

Merci pour tout, je place le sujet en Résolu même si j'aimerais ton avis sur le CSS global

Salut, Je n'ai pas regardé en profondeur mais ça m'a l'air relativement propre pas de gros soucis, un petit raccourci :

margin-left: auto;
margin-right: auto;

peut être simplement remplacé par

margin : 0 auto;

Bon courage pour la suite !