Arrière-plans et bordures

Cette traduction est en cours.

Dans cette leçon, nous verrons quelques unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.

Prerequisites: Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective: To learn how to style the background and border of boxes.

Mettre en forme l'arrière-plan avec CSS

La propriété CSS background est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété background difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.

.box { 
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, 
  url(big-star.png) center no-repeat, rebeccapurple; 
} 

Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.

Couleur de fond

La propriété background-color définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <color>. La background-color s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.

Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément <span>.

Expérimentez avec ce code, en faisant varier les valeurs  <color> dans les différentes déclarations.

Images de fond

La propriété background-image permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.

Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.

Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété background-color dans l'exemple ci-dessus.

Contrôler le background-repeat

La propriété background-repeat permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :

  • no-repeat — aucune répétition de l'arrière-plan.
  • repeat-x — répétition horizontale.
  • repeat-y — répétition verticale.
  • repeat — comportement par défaut : répétition dans les deux directions.

Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à  no-repeat, une seule étoile apparaît donc. Remplacez par repeat-x et repeat-y  et observez.

Dimensionner l'image de fond

Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété background-size — avec comme valeur une  longueur ou un pourcentage, permet d'adapter l'image à l'élément pour en occuper tout le fond.

On peut aussi utiliser les mots-clé :

  • cover — le navigateur redimensionne l'image pour que tout le fond soit couvert, en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte.
  • contain — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.

Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.

Essayez ce qui suit :

  • Changez les dimensions de l'arrière-plan.
  • Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par background-size: cover ou background-size: contain.
  • Si votre image est plus petite que la boîte, vous pouvez changer la valeur de background-repeat pour répéter l'image.

Positionner l'image de fond

La propriété background-position permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine (0,0) au coin en haut à gauche de la boîte, l'axe (x) étant horizontal, l'axe (y) vertical.

Note : La valeur par défaut de  background-position est (0,0).

Les valeurs les plus communes pour background-position se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.

Vous pouvez utiliser les mots-clé tels que top et right (vous trouverez les autres valeurs possibles sur la page background-image):

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: top center; 
} 

Et Longueurs, ou pourcentages :

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: 20px 10%; 
} 

On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}

La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite : 

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: top 20px right 10px; 
} 

Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.

Note : background-position est un raccourci pourbackground-position-x et background-position-y, qui permettent de fixer individuellement les positions sur chaque axe.

Arrière-plan dégradé

Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété background-image.

Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <gradient>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple celui là. Créez votre dégradé puis copiez-collez le code source qui l'a généré.

Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.

 Images de fond multiples

It is also possible to have multiple background images — you specify multiple background-image values in a single property value, separating each one with a comma.

When you do this you may end up with background images overlapping each other. The backgrounds will layer with the last listed background image at the bottom of the stack, and each previous image stacking on top of the one that follows it in the code.

Note : on peut joyeusement mélanger gradients et images de fond classiques.

The other background-* properties can also have values comma-separated in the same way as background-image:

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

Each value of the different properties will match up to the values in the same position in the other properties. Above, for example, image1's background-repeat value will be no-repeat. However, what happens when different properties have different numbers of values? The answer is that the smaller numbers of values will cycle — in the above example there are four background images but only two background-position values. The first two position values will be applied to the first two images, then they will cycle back round again — image3 will be given the first position value, and image4 will be given the second position value.

Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.

Attachement du fond

Another option we have available for backgrounds is specifying how they scroll when the content scrolls. This is controlled using the background-attachment property, which can take the following values:

  • scroll: Causes the element's background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls.
  • fixed: Causes an element's background to be fixed to the viewport, so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen.
  • local: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the scroll value is rather confusing and doesn't really do what you want in many cases. The local value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.

The background-attachment property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here).

Utiliser la propriété raccourci background 

As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the background property. This shorthand lets you set all of the different properties at once.

If using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. In the example below we have a gradient with a size and position, then an image background with no-repeat and a position, then a color.

There are a few rules that need to be followed when writing background image shorthand values, for example:

  • A background-color may only be specified after the final comma.
  • The value for background-size may only be included immediately after background-position, separated with the '/' character, like this: center/80%.

Take a look at the MDN page for background to see all of the considerations.

Arrière-plans et accessibilité

Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une background-color qui rendra le texte lisible si l'image n'est pas chargée.

Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.

Bordures

When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and style of the border in one line of CSS.

We can set a border for all four sides of a box with border:

.box { 
  border: 1px solid black; 
} 

Or we can target one edge of the box, for example:

.box { 
  border-top: 1px solid black; 
} 

The individual properties for these shorthands would be:

.box { 
  border-width: 1px; 
  border-style: solid; 
  border-color: black; 
} 

And for the longhands:

.box { 
  border-top-width: 1px; 
  border-top-style: solid; 
  border-top-color: black; 
} 

Note : These top, right, bottom, and left border properties also have mapped logical properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers handling different text directions.

There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.

Coins arrondis

On peut arrondir les coins d'une boîte avec la propriété border-radius  and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.

Par exemple, Pour donner par exemple un rayon de  10px à chacun des quatre coins :

.box { 
  border-radius: 10px; 
} 

Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :

.box { 
  border-top-right-radius: 1em 10%; 
} 

Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de border-radius, vous y trouverez la syntaxe pour les différentes options.

Jouer avec les arrière-plans et les bordures

Testons vos nouvelles connaissances : en partant  de l'exemple fourni plus bas :

  1. Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.
  2. Ajouter une image de fond (utiliser l'URL balloons.jpg) à redimensionner pour qu'elle recouvre la boîte.
  3. Donnez au <h2> une couleur de fond noire semi-transparente, avec un texte en blanc.

Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

Résumé

Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou  une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.

Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?

Dans ce cours

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS