[Résolu] Centrer un fond par rapport ...

Bonjour,

Voila la maquette de ce que je dois arriver à faire : http://bougetoi.com/autres/design_rouge6.8.jpg

Les trois bandes grises en fond doivent comme vous le voyez, être positionnées afin de faire la continuitée de celles qui sont dans le header.
Afin qu'elles paraissent infinies (collées à gauche) et ce sur toutes les résolutions, j'ai créé une image de fond bien plus large.

Il faudrait donc pour obtenir l'effet escompté que je puisse placer mon image de fond centrée horizontalement mais par rapport à l'angle supérieur droit je pense.

Mais comment est-ce possible ??

Voici la version html pour le moment : http://bougetoi.com/champs/

Merci d'avance
Modifié par albataur (16 Apr 2007 - 15:24)

Salut,

albataur a écrit :
Voila la maquette de ce que je dois arriver à faire : http://bougetoi.com/autres/design_rouge6.8.jpg

Y a comme une erreur dans l'énoncé, centré ou aligné à droite ?

Je pense que dans ton cas ça doit être centré tout court :

body {
	background-color: #f5f1f0;
	padding: 0;
	margin: 0;
	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	background-image: url(../img/fond_bandes.png);
	background-repeat: no-repeat;
	background-position:  top [b]center[/b];
}

Par ailleurs sais-tu que tu peux gagner un peu de place en écrivant la propriété raccourcie de background:

background: url(../img/fond_bandes.png) no-repeat top center;

Mikachu a écrit :
Salut,


Y a comme une erreur dans l'énoncé, centré ou aligné à droite ?

Je pense que dans ton cas ça doit être centré tout court :

body {
	background-color: #f5f1f0;
	padding: 0;
	margin: 0;
	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	background-image: url(../img/fond_bandes.png);
	background-repeat: no-repeat;
	background-position:  top [b]center[/b];
}

Par ailleurs sais-tu que tu peux gagner un peu de place en écrivant la propriété raccourcie de background:

background: url(../img/fond_bandes.png) no-repeat top center;

Je me suis mal exprimé en fait.

En gros ce que je voudrais faire pour éviter d'avoir une image trop large, je voudrais la positionner décalée de quelques pixels par rapport au centre.

Mais je ne pense pas que ce soit possible. La seule solution va être d'agrandir mon image avec du vide à droite afin qu'elle soit bien positionnée.

Salut,

albataur a écrit :

En gros ce que je voudrais faire pour éviter d'avoir une image trop large, je voudrais la positionner décalée de quelques pixels par rapport au centre.

C'est pourtant la solution la moins risquée, sinon tu devrais positionner ton
image horizontalement à droite ou à gauche voire pas du tout (valeur initiale à 0%)
Le poid d'une image gif ou png en 8 couleurs (au lieu des 256 par default) de grande taille ne sera de toute façon pas très élevé.
Si toutefois tu persistes dans ton choix de positionnement au pixel prés, tu peux utiliser
des valeur en pixel sachant que la première valeur doit être celle du
positionnement horizontale.
Exemple:

background: url(../img/fond_bandes.png) no-repeat 20px 0;

Modifié par Hermann (16 Apr 2007 - 14:27)

Ça n'a pas l'air très compliqué tout ça.

1. On centre horizontalement tout le contenu, dont l'en-tête.
2. On place les bandes comme image de fond de l'élément body, image de fond que l'on centre horizontalement.
3. Pour que ça soit raccord, il faut que l'image de fond soit bien proportionnée. En pratique, on aura toute une partie de cette image, à droite, qui sera une teinte unie, vu que la partie la plus à droite des bandes doit se placer au centre.
4. On optimise les images. Pour le fond de body, PNG en couleurs indexées, 8 couleurs, en créant le fichier avec The Gimp ou en passant un coup de PngOptimizer.

Florent V. a écrit :
Ça n'a pas l'air très compliqué tout ça.

1. On centre horizontalement tout le contenu, dont l'en-tête.
2. On place les bandes comme image de fond de l'élément body, image de fond que l'on centre horizontalement.
3. Pour que ça soit raccord, il faut que l'image de fond soit bien proportionnée. En pratique, on aura toute une partie de cette image, à droite, qui sera une teinte unie, vu que la partie la plus à droite des bandes doit se placer au centre.
4. On optimise les images. Pour le fond de body, PNG en couleurs indexées, 8 couleurs, en créant le fichier avec The Gimp ou en passant un coup de PngOptimizer.

Oui c'est la solution que j'ai finalement adoptée.
Finalement vous aviez raison, je ne perd qu'1 Ko en agrandissant la partie droite de l'image.

Merci pour votre aide (encore une fois)

Modifié par albataur (16 Apr 2007 - 15:24)