[Résolu] Fond bicolore, image de fond et mise en page CSS. [Résolu]

Bonjour,

Alors voila, j'ai monté un blog sur "blogger".
Je l'ai fait évoluer petit à petit.

Mes connaissances en CSS sont donc rudimentaires.
Elles m'ont certes permis d'ajouter une image de fond (bicolore,cf. ci-dessous).

Mais elles ne me permettent pas de régler le problème que je rencontre (même en lisant les différents topics de ce forum et quelques tutos ) :

Sur mon écran (4/3), le corps (body) est encadré par deux bandes marrons grâce à l'image bicolore.
Mais si je le regarde sur un écran large (widescreen) ou si je réduis la fenêtre, alors le corps "glisse" sur l'image de fond et je me retrouve avec le corps non plus encadré mais sur les bandes...

Mon but est d'arriver à garder le corps encadré par deux bandes de couleurs, et ce quelque soit la définition de l'écran et/ou la taille de la fenêtre.

Désolé si mes question paraissent stupides ou triviales ou sont déjà résolues mais je ne trouve pas et je suis vraiment dans une impasse :

1 - est-ce possible à faire ?
2 - si oui, comment (pas nécessairement en passant par une image d'ailleurs).

En remerciant par avance ceux qui sauront m'aider
Modifié par Le Goupil (11 May 2007 - 00:29)

Bonsoir,

On peut jeter un oeil au blog ?

Bonsoir Florent,

Sans problème :
http://rockngeek.blogspot.com/

Là, y'a une image qui est pas bicolore mais le principe est le même avec les deux bandes marrons de chaque coté.
Si on modifie la largeur de la fenêtre, les bandes marrons "bougent" (en fait c'est le texte).

Par ailleurs je réfléchissais à cette solution :
http://dotclear.khlevina.info/kit/?2005/11/06/4-fond-de-fenetre#bicolore

Mais je sais pas comment créer une "boite" (c'est comme cela que l'on dit ?) qui engloberait tout le texte (post + barre de coté).
Il suffirait ensuite de donne une couleur de fond à cette div (ex : blanc), puis une couleur de fond au corps (ex: bleu), et j'aurais toujours le texte sur fond blanc entouré de bleu... c'est ça ou je dis une bétise ?

Salut,

Ton site ayant une largeur fixe, tu peux avoir les 2 bandes sur les côtés en utilisant une seule image, en utilisant la propriété background-position. Il "suffit" de créer une image suffisamment large pour couvrir toute la gamme des résolutions des moniteurs existants (pour l'instant, +/- 2500px de large, mais ça risque de continuer à augmenter, donc disons une image de 4000px de largeur), sur 1px de haut. Ca ne pèse pratiquement rien.

Sur cette image, tu colores tout de la couleur des bandes latérales, sauf la partie centrale de l'image, là où ton site vient s'insérer.

Ensuite, tu donnes cette image comme fond à body, ou à ton conteneur principal :

#global {
   background: #ccc url(mon_image.png) [b]center[/b] 0 [b]repeat-y[/b];
}

center indique le positionnement horizontal de l'image de fond par rapport à son élément, elle devra être centrée (hahaha, quelle surprise), et repeat-y indique qu'elle doit se répéter sur la hauteur.

Et le tour est joué.

Merci Thomas !!

J'essaye ça de suite (si je m'écroule pas de sommeil) et je te tiens au courant du résultat.

Génial !!!!!!!!!!!!!

ça marche parfaitement !!!!

Merci à tous, et surtout à Thomas .

Demain je fais ta bande de 140.000 px de large et si ça marche avec, je marque ce problème comme résolu (j'attends parce qu'on est jamais trop prudent... mais je ne doute pas une seule seconde ).

Merci encore .

D'ici là, je souhaite une bonne nuit à tous.
Modifié par Le Goupil (11 May 2007 - 00:06)

Bon j'ai pas résisté, j'ai tenté...


... et ça marche !!!

Donc merci encore, j'édite le titre du post et au dodo.

@+