CSS Contexte

Propriétés de fond CSS sont utilisés pour définir les effets d'arrière-plan d'un élément.

Propriétés CSS utilisées pour les effets d'arrière-plan:

• background-color
• fond d'image
• background-repeat
• background-attachment
• fond position

Couleur de fond

La propriété background-color spécifie la couleur de fond d'un élément.

La couleur de fond d'une page est définie dans le sélecteur de corps:

Exemple

body {background-color:#b0c4de;}

Essayez vous-même »

Avec CSS, une couleur est le plus souvent indiquée par:

• une valeur HEX - comme "# FF0000"
• une valeur RVB - comme "rgb (255,0,0)"
• un nom de couleur - comme "rouge"

Regardez les valeurs de couleur CSS pour une liste complète des valeurs de couleur possibles.

Dans l'exemple ci-dessous, le h1, p, et les éléments div ont des couleurs différentes de fond:

Exemple

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Essayez vous-même »

---

Image de fond

La propriété background-image précise d'une image à utiliser comme fond d'un élément.

Par défaut, l'image est répétée de sorte qu'il couvre tout l'élément.

L'image de fond pour une page peut être réglé comme suit:

Exemple

body {background-image:url('paper.gif');}

Essayez vous-même »

Voici un exemple d'une mauvaise combinaison de texte et image de fond. Le texte est presque illisible:

Exemple

body {background-image:url('bgdesert.jpg');}

Essayez vous-même »

---

Image de fond - Répéter horizontalement ou verticalement

Par défaut, la propriété background-image se répète une image à la fois horizontalement et verticalement.

Certaines images doivent être répétées uniquement horizontalement ou verticalement, ou ils vont chercher étrange, comme ceci: 

Exemple

body
{
background-image:url('gradient2.png');
}

Essayez vous-même »

Si l'image est répétée horizontalement seulement (repeat-x), l'arrière-plan sera mieux:

Exemple

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Essayez vous-même »

---

Image de fond - la position Set et no-repeat

 Lorsque vous utilisez une image de fond, utiliser une image qui ne perturbe pas le texte.

Affichage de l'image une seule fois est spécifié par la propriété background-repeat:

Exemple

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Essayez vous-même »

Dans l'exemple ci-dessus, l'image de fond est indiqué dans le même endroit que le texte. Nous voulons changer la position de l'image, de sorte qu'il ne perturbe pas le trop de texte.

La position de l'image est spécifiée par la propriété background-position:

Exemple

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Essayez vous-même »

---

Contexte - Sténographie la propriété

Comme vous pouvez le voir dans les exemples ci-dessus, il existe de nombreuses propriétés à prendre en considération lorsqu'il s'agit de milieux.

Pour raccourcir le code, il est également possible de spécifier toutes les propriétés en une seule propriété. C'est ce qu'on appelle un raccourci.

La propriété raccourcie pour le fond est tout simplement «de fond»:

Exemple

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Essayez vous-même »

Lorsque vous utilisez le raccourci de propriété de l'ordre des valeurs de propriété est la suivante:

• background-color
• fond d'image
• background-repeat
• background-attachment
• fond position

Il n'a pas d'importance si l'une des valeurs de propriété est manquant, aussi longtemps que ceux qui sont présents sont dans cet ordre.

Cet exemple utilise les CSS plus avancé. Jetez un oeil: par exemple avancée

---

Exemples

Comment définir une image d'arrière-plan fixe
Cet exemple montre comment définir une image de fond fixe. L'image ne ​​sera pas défiler avec le reste de la page.

---

Toutes les propriétés CSS background

Propriété	Description
fond	Définit toutes les propriétés d'arrière-plan dans une déclaration
background-attachment	Définit si une image d'arrière-plan est fixé ou rouleaux avec le reste de la page
background-color	Définit la couleur de fond d'un élément
fond d'image	Définit l'image de fond pour un élément
fond position	Définit la position de départ d'une image de fond
background-repeat	Définit la façon dont une image de fond sera répété