Définit les détails supplémentaires que l'utilisateur peut afficher ou cacher
La propriété de feuille de style css background permet de gérer un ensemble de propriétés d'arrière plan (fond) en une seule fois
Lors de la création d'un site Web, le style d'arrière-plan joue un rôle important dans l'esthétique visuelle de la conception. Qu'il s'agisse d'un bouton ou d'une grande zone interactive, les styles d'arrière-plan fournissent une définition et permettent de distinguer les zones à des fins particulières. Comprendre les possibilités offertes par les propriétés de la famille des arrière-plans en CSS vous aidera à créer un code plus efficace et des conceptions visuellement intéressantes.
La propriété background est la propriété css qui gére l'arriere plan d'un élément html
Le fond ne désigne pas forcément le fond de toute une page web, il désigne le fond ou arriére plan de tout élément html. On peut aussi appliquer la propriété css background à un fond uniquement des titres, aux fond de paragraphes, ou n'importe quel élément html, ou encore à un ou plusieurs mots d'un paragraphe.
Il existe 2 types de fonds :
☆ Les fonds comportant une couleur
☆ Les fonds comportant une image de fond
☆ On utilise la propriété CSS background-color.
Elle s'utilise comme la propriété color, vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. <body> correspond à toute la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur de fond de la page web.
Code : CSS
Exemple :
Exemple : Copier le code
body{
background-color:yellow;
color: black;
}
En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur de cette balise prendront le même style c'est ce qu'on appelle l'héritage..
On dit que les balises qui se trouvent à l'intérieur d'une autre balise "héritent" de ses propriétés.
Mai si vous dites par la suite que vous voulez vos titres en noir, ce style aura la priorité et vos titres seront donc en noir.
Cela ne fonctionne pas uniquement pour la couleur, entendons-nous bien. Toutes les propriétés CSS seront héritées : vous pouvez par exemple demander une taille de texte de "1.3em" dans la balise <body>, et tous vos titres et paragraphes seront de cette taille-là.
Un exemple où je vous montre comment on "annule" l'héritage
Code : CSS
Exemple :
Exemple : Copier le code
body{
background-color: #000000;
color: #FFFFFF;
}
h1{
color: #FF0000;
}
On n'a pas indiqué de couleur particulière pour les paragraphes (<p>), donc ils ont hérité de la couleur blanche. Mai le titre n'a pas hérité de la couleur blanche car on a écrit qu'on voulait qu'il soit en rouge.
Tout comme pour la couleur de fond, l'image de fond ne s'applique pas forcément à la page entière, on peut tout aussi bien mettre une image de fond aux titres, paragraphes, citations etc...
La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit lui mettre url("nom_de_l_image.png").
Par exemple :
background-image:url("fond.png");
On peut aussi mettre JPEG ou GIF.
L'adresse indiquant où se trouve l'image de fond peut être en absolu (http://...) ou en relatif (fond.png).
Attention lorsque vous mettez une adresse en relatif dans le fichier CSS ! elle doit être indiquée par rapport au fichier .css et non pas par rapport au fichier .html.
Ainsi, si votre site comporte 2 dossiers : "css" et "images", il vous faudra taper : "../images1/fond.png" pour récupérer l'image de fond. Si le chemin n'est pas correct, votre image de fond ne s'affichera pas.
Si on veut appliquer une image de fond à toute la page, on doit là encore utiliser la balise <body> :
Code : CSS
Exemple :
Exemple : Copier le code
body{
background-image: url("../images1/fond.png");
}
h1{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p{
text-align: justify;
text-indent: 25px;
}
Il existe par ailleurs une propriété CSS qui permet de "fixer" le fond, pour ne pas bouger en même temps que le texte. L'effet obtenu est intéressant.
La propriété est background-attachment et peut prendre 2 valeurs :
☆ fixed : l'image de fond reste fixe.
☆ scroll : l'image de fond défile avec le texte (par défaut).
En réutilisant le même fichier XHTML que tout à l'heure, mais en changeant un peu le CSS pour y rajouter background-attachment, on obtient ceci :
Code : CSS
Exemple :
Exemple : Copier le code
body{
background-image: url("../images1/neige.png");
background-attachment: fixed; /* Le fond restera fixe */
}
h1{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p{
text-align: justify;
text-indent: 25px;
}
Essayez de descendre plus bas dans la page avec les barres de défilement, vous verrez que le fond reste fixe
Il y a 2 propriétés en rapport avec les images de fond
1. Celle qui gère la répétition de l'image de fond. Cette propriété s'appelle
background-repeat ses valeurs sont:
☆ no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
☆ repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
☆ repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
☆ repeat : le fond sera répété (par défaut).
Gardons encore notre même fichier XHTML.
Code : CSS
Exemple :
Exemple : Copier le code
body{
background-image: url("../images1/fond.png");
background-repeat: repeat-y;
}
2. Concernant la position de l'image de fond.
On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété n'est intéressante que si vous avez mis "background-repeat: no-repeat;" (un fond qui ne se répète pas).
C'est background-position elle a 2 valeurs en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe si vous appliquez le fond à un paragraphe). Ainsi, si vous tapez :
background-position:20px 70px;
... votre fond sera placé à 20 pixels de la gauche et à 70 pixels du haut. Il est aussi possible de mettre ces valeurs en anglais :
☆ top : en haut.
☆ bottom : en bas.
☆ left : à gauche.
☆ center : centré.
☆ right : à droite.
Il est possible de combiner ces mots. Par exemple, pour aligner une image à gauche en haut, vous taperez :background-position: left top;
Code : CSS
Exemple :
Exemple : Copier le code
body{
background-image: url("../images1/fond.jpeg");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
آ
Si vous utilisez beaucoup de propriétés en rapport avec le background , vous pouvez utiliser ce que j'appelle "grande-propriété" background qui peut prendre plusieurs valeurs combinées des propriétés: background-image, background-repeat, background-attachment et background-position.
C'est la première "grande-propriété" que nous utilisons, Pour toutes les "grande-propriétés" comme background, il faut savoir que :
☆ L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les valeurs dans n'importe quel ordre :
background: url("../images1/image1.gif") no-repeat top right fixed;
background: no-repeat fixed top right url("../images1/image1.gif");
☆ Vous n'êtes pas obligés de mettre toutes les valeurs.
background:url("../images1/image1.gif") no-repeat top right;
L'exemple ci-dessous donne le même résultat que l'exemple précédent, mais il utilise background pour combiner les valeurs et rendre le fichier CSS plus petit :
Code : CSS
Exemple :
Exemple : Copier le code
body{
background: url("../images1/image1.gif") no-repeat top right fixed;
}
Vous pouvez appliquez un fond à vos titres ou paragraphes, mai pas seulement à la page. Ce cours en cnss est terminé, nous avons maintenant la base qui nous permettra de créer des pages Web acceptables. Mai il nous reste encore plein de choses à voir comme les tableaux, les formulaires etc...
Voir notre guide des propriété css pour plus de détail sur les propriétés css background
chapitre précédent chapitre suivant