Meric-Graphisme - Les fonds

La zone derrière les éléments visibles situés au premier plan peut être modifiée, grâce à l'ID #page.
En largeur elle couvre la totalité de la zone située à gauche de la boite de gauche jusqu'à la zone située à droite de la boîte de droite.
En hauteur, elle s'étend de la zone située derrière le header (#headtop), jusqu'à celle située derrière le pied de page (#foot)

Pour remplir cette zone le principe est le même que pour placer un fond dans le body.
Les lignes de code sont à entrer à la suite de l'ID page (#page) :

Fond: uni

code

#page {
background-color: #FFFF00;
color: inherit;
padding-top: 0px;
}

La couleur de fond est ici fixée par le code hexadécimale sui suit background

Le fond est "une" image :

Comme pour le fond du site, il est possible de mettre une image en fond de page. Cette méthode est souvent utilisée lorsqu'on souhaite placer une texture dans cette zone.

Plusieurs options sont possibles :

	L'image doit se répéter horizontalement (suivant X) et verticalement (suivant Y), afin de couvrir la totalité de la page.
L'image doit se répéter suivant Y (Verticalement)		L'image doit se répéter suivant X (horizontalementt)

L'image se répète horizontalement (suivant x)

L'image se nomme degrade.png et se trouve dans le dossier img à l'intérieur du dossier de la skin.

code

#page {
background-color: #CCCFF5; 
background-image: url(img/degrade.png);
background-repeat: repeat-x;
color: inherit;
padding-top: 0;
}

L'image du nom de degrade.png est appelée à partir de la commande background-image. A la suite de cette commande, il faut préciser l'adresse (url) de l'image (ici, elle est située dans le dossier img de la skin). Une ligne suppélmentaire (background-repeat) donnera le sens de répétion de l'image de fond (ici X).

L'image se répète verticalement (suivant Y) :

L'image se nomme degrade.png et se trouve dans le dossier img à l'intérieur du dossier de la skin.

code

#page {
background-color: #CCCFF5; 
background-image: url(img/degrade.png);
background-repeat: repeat-y;
color: inherit;
padding-top: 0;
}

Pour obtenir la répétition de l'image dans le sens vertical cette fois (suivant Y, donc), il suffit de modifier le sens de la répétition en précisant à la suite de background-repeat, repeat-y.

L'image se répète dans les deux sens (suivant X et suivant Y) :

L'image se nomme point-vert.png et se trouve dans le dossier img à l'intérieur du dossier de la skin.

code

#page {
background-color: #CCCFF5; 
background-image: url(img/point_vert.png);
background-repeat: repeat;
color: inherit;
padding-top: 0;
}

Si on ne précise pas le sens de répétition, l'image de reproduit de gauche à droite et de haut en bas.

Quelques remarques :

- Lorsqu'on fixe pour fond une image (background-image) , il faut également lui donner une couleur de fond (background-color) (qui sera invisible car située derrière l'image), par habitude je choisis pour cette couleur une teinte voisine de la couleur dominante de l'image.
- Pour la validation W3C, il est nécessaire de coupler les deux commandes : background-color et color (ici la couleur de la police est reçue par héritage d'un autre bloc).
- les trois lignes background-color, background-image et background-repeat peuvant être contractées en une seule, pour donner dans le dernier cas:

code

#page {
background: #CCCFF5 url(img/degrade.png) repeat; 
color: inherit;
padding-top: 0;
}

Date de création : 19/06/2008 @ 19:26
Dernière modification : 29/08/2009 @ 20:08
Catégorie : Les fonds
Page lue 6429 fois

Imprimer l'article

Réactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Tags Cloud

Tags Cloud

Skins au choix

Choisissez une skin

Skin :

Connexion...

Membres : 418

[ Mot de passe perdu ? ]

[ Devenir membre ]

Membre en ligne :

Anonymes en ligne : 2

Total visites: 716141

Record connectés :

Membres: 23

Le 26/12/2007 @ 21:50

Webmaster - Infos

Calendrier

Tchat non-Membres

Vous devez être connectés en tant que membre pour accéder au Tchat

Recherche

Sites skins Guppy

Astrographisme
Charli77 Skins V4.6
Chez Papinou
Guppy Skins
Guppy style
Le style de GuppY

Lettre d'information

Outils en ligne

Graphisme

Générateur de boutons

Générateur de fonds
Stickers ou badges
Retoucher les Gifs

CSS

Validation W3C

Divers

Browsers shots

Sondage

Nouvelles des Amis

Chez Papinou

FreeGuppy

StockAstuces

association freeGuppY

Visites

716141 visiteurs

2 visiteurs en ligne

Liens

Haut

Conformément à la loi française Informatique et Liberté (article 34), vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données vous concernant.

Document généré en 0.44 seconde