• 4 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 08/01/2018

Maitrisons nos arrière-plans

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

La gestion des arrière-plans est primordiale lors de la conception du design d'un site Web : il faut avouer qu'un fond tout blanc n'est pas ce qu'on fait de plus beau !

Même si le CSS nous permettait de manipuler nos images de fond avec des propriétés telles que background-repeat ou background-position, force est de constater que nous étions tout de même assez limités...

CSS3 change la donne de ce côté également et nous apporte un lot de nouvelles propriétés qui n'attendent que vous pour être utilisées. :)

L'origine des fonds

Placer précisément nos arrières-plans se fait la plupart du temps à l'aide de la propriété background-position.

Par défaut, cette propriété place notre fond depuis le coin supérieur gauche de l'élément HTML : il est désormais possible de modifier ce comportement.

Ceci se fait à l'aide de la propriété background-origin qui accepte trois valeurs différentes :

  • padding-box

  • border-box

  • content-box

padding-box : la valeur par défaut

Selon les normes, la propriété background-origin a comme valeur par défaut padding-box.

Cette valeur signifie que le coin supérieur gauche de notre image de fond sera positionné au coin supérieur gauche de notre élément HTML, bordures non incluses.

Un petit exemple vous aidera à mieux comprendre le principe. :)

div
{
    /* On fixe les dimensions de notre <div> */
    width: 159px;
    height: 280px;

    /* On lui définit une marge interne */
    padding: 10px;

    /* On lui met des bordures en petits tirets */
    border: 10px dashed #000;

    /* Un fond rouge pour mieux voir */
    background-color: red;

    /* On indique une image de fond (notre cher Zozor !) */
    background-image: url('zozor.jpg');

    /* On ne veut pas répéter cette image */
    background-repeat: no-repeat;
    
    /* Et enfin, notre nouvelle propriété. */
    background-origin: padding-box;
}

Le résultat étant le suivant :

Image utilisateur

Comme vous le constatez, c'est ce que nous avions déjà l'habitude d'avoir avec CSS2.1 : une image dont l'origine se trouve dans le coin supérieur gauche tout en n'étant pas sous les bordures.

border-box : la prise en compte des bordures

Si vous avez bien suivi jusque-là et que vous êtes plutôt du genre perspicace, vous avez sûrement deviné ce que fait cette nouvelle valeur. Je vous le donne dans le mille : elle signifie que le coin supérieur gauche de notre image de fond sera positionné au coin supérieur gauche de notre élément HTML, bordures incluses.

Si nous utilisons le même code que précédemment en modifiant juste background-origin avec cette valeur, voilà ce que ça nous donne :

Image utilisateur
content-box : par rapport au contenu

Pour cette troisième est dernière valeur, vous pouvez oublier les bordures : cette fois, concentrons-nous sur le contenu de l'élément HTML !

Enfin, pour être précis, nous allons nous baser sur son padding, sa marge interne.

Notre exemple comporte un padding de 10px, ce qui nous donne le résultat suivant :

Image utilisateur

Si notre élément possède un padding-top de 20px et un padding-left de 30px, le résultat serait alors le suivant :

Image utilisateur

Je dois avouer que, du coup, les noms des valeurs de background-origin sont un peu mal choisis... Mais il faut faire avec ! :p

Tout essayer !

Si vous avez testé l'exemple ci-dessus, peut-être avez-vous été surpris de voir que notre <div> est plus petite lorsque le padding vaut 0 : si c'est le cas, rappelez-vous que la marge interne fait partie intégrante de la hauteur d'un élément HTML de type block, au même niveau que la propriété height.

Dans notre exemple de base, le padding vaut 10px : puisque nous le réduisons par la suite, il est normal que notre <div> soit plus petite. ;)

Placez, coupez !

Très proche dans le principe de background-origin, CSS3 nous propose également la propriété background-clip.

Première bonne nouvelle pour vous, les valeurs que peut avoir cette propriété sont exactement les mêmes que background-origin : à savoir padding-box, border-box et content-box.

La mauvaise nouvelle, c'est que même si ces valeurs ont le même nom, elles ne font pas tout à fait la même chose ! :o

Mais avant de les voir en détail, il serait bon de comprendre à quoi sert background-clip.
Nous avons vu tout à l'heure que nous pouvons distinguer trois "zones" dans un élément HTML : tout l'élément en lui-même, l'élément sans ses bordures et enfin son contenu.

background-clip permet de limiter l'affichage du fond de l'élément selon ces trois zones. C'est encore flou dans votre tête ? Pas de panique, les exemples qui suivent devraient vous éclairer. :)

border-box : la valeur par défaut

Premier changement, et pas le moindre, de background-clip par rapport à background-origin : la valeur par défaut est maintenant border-box !

Cette valeur indique au navigateur qu'il doit afficher l'arrière-plan sur tout l'élément, bordures comprises.

Si on reprend notre exemple précédent, voici donc ce que ça donne :

div
{
    /* On fixe les dimensions de notre <div> */
    width: 159px;
    height: 280px;

    /* On lui définit une marge interne */
    padding: 10px;

    /* On lui met des bordures en petits tirets */
    border: 10px dashed #000;

    /* Un fond rouge pour mieux voir */
    background-color: red;

    /* On indique une image de fond (notre cher Zozor !) */
    background-image: url('zozor.jpg');

    /* On ne veut pas répéter cette image */
    background-repeat: no-repeat;
    
    /* Et enfin, notre clip ! */
    background-clip: border-box;
}
Image utilisateur
padding-box : excluons les bordures

Avec cette valeur, background-clip empêchera le navigateur d'afficher l'arrière-plan sous les bordures. Notez que TOUT l'arrière-plan est alors invisible, que ce soit les images de fond ou les couleurs de fond !

Image utilisateur
content-box : par rapport au contenu

Je ne vais pas vous ré-expliquer comment fonctionne content-box puisqu'il s'utilise de la même façon qu'avec background-origin.

La seule différence, comme pour les autres valeurs de cette propriété, est qu'il permet "d'effacer" l'arrière-plan, et non de déplacer son origine.

Pour que ce soit plus clair, voici quelques comparaisons entre background-origin: content-box; et background-clip: content-box; :

Image utilisateur

Vous pouvez également cliquer sur le lien ci-dessous pour tester directement depuis votre navigateur les différentes valeurs de background-clip :

Tout essayer !

Si tout ceci reste encore assez flou pour vous, je vous conseille de tout tester par vous-même.
Je vous propose également un petit défi : essayez de prévoir le bon affichage en utilisant en même tempsbackground-origin et background-clip. Si vous réussissez, vous êtes un vrai champion ! :D

Un arrière-plan extensible

Avoir des images de fond, c'est bien.
Les adapter à la taille de leur conteneur, c'est mieux ! :D

Il est assez surprenant de constater que, avec CSS2.1, il n'est pas possible de modifier la taille de nos images de fond. Qui n'a jamais souhaité réaliser ce genre de chose ?

Une des techniques possibles consiste alors à placer une balise <img> en position: absolute; et à modifier ses dimensions. Mais bouh, que c'est sale. >_

Notre grand ami CSS3 aime la propreté et nous propose une solution toute simple : la propriété background-size !

Notre première approche de background-size

Celle propriété prend deux valeurs séparées par un espace, en pixels ou en pourcentage. La première valeur correspond alors à la largeur de l'image et la seconde à sa hauteur.

Un petit exemple avec une image de notre cher Zozor qui fait, à l'origine, 80px*80px :

div
{
    /* On définit des dimensions plus grandes que notre image,
    pour que vous voyez bien le principe */
    width: 200px;
    height: 200px;

    /* On ajoute une petite bordure */
    border: 3px solid #000;

    /* On met en place notre arrière-plan
    (j'espère que vous vous rappelez du modèle HSL !) */
    background-color: hsl(100,80%,40%);
    background-image: url('zozor.png');
    background-repeat: no-repeat;

    /* On modifie la taille de l'image de fond */
    background-size: 90px 140px;
}
Image utilisateur

Si nous ne précisons qu'une seule valeur, la seconde sera alors comprise comme étant auto. Mais qu'est-ce donc ?
auto signifie que la dimension correspondante (largeur ou hauteur) sera automatiquement calculée par le navigateur afin que l'image garde ses proportions d'origine.

div
{
    /* [...] */
    background-size: auto 111px;
}
Image utilisateur

Vous voyez ? Nous n'avons précisé que la hauteur de l'image et, grâce au mot-clé auto défini pour la largeur, le navigateur l'a automatiquement calculée afin que l'image garde ses proportions ! Ce qui, entre nous, n'a pas dû être trop difficile puisque notre image est un carré... :-°

Utilisation des pourcentages

Comme je vous l'ai dit, background-size accepte également des pourcentages en tant que valeurs.

Et là, faites bien attention, car il y a une grosse subtilité !

On serait tenté de croire que les pourcentages se calculent selon les dimensions de l'image. Et on se tromperait !
Ceux-ci se calculent selon les dimensions de la zone d'affichage de l'arrière-plan.

Notez le gras et le soulignement de la phrase précédente, ce n'est pas anodin : les dimensions de la zone d'affichage de l'arrière-plan sont différentes de celles de l'élément HTML correspondant !

Je ne comprends pas tellement pourquoi... On affiche pourtant notre fond dans tout notre élément, non ?

Eh bien non, pas forcément, et c'est là que réside toute la subtilité.

Rappelez-vous ce qu'on a fait au début de ce chapitre : on s'est amusé à modifier l'origine de nos images de fond avec background-origin.
Avec nos bêtises, on a modifié la zone d'affichage des arrière-plans ! :p

Le tableau ci-dessous devrait vous permettre de voir (et je l'espère de comprendre !) ce comportement qui peut paraître anarchique aux premiers abords :

Extrait du CSS utilisé

Résultat

padding: 30px;
background-repeat: repeat;
background-size: 25%;
Image utilisateurImage utilisateur
padding: 30px;
background-repeat: repeat;
background-origin: border-box;
background-size: 25%;
background-origin: border-box;

demande au fond de s'étendre jusque sous les bordures.
La zone d'affichage des fonds est donc un peu plus grande que la ligne ci-dessus.
Les Zozor sont donc un peu plus gros (si si, regardez bien !).

Image utilisateurImage utilisateur
padding: 30px;
background-repeat: repeat;
background-origin: content-box;
background-size: 25%;

A cause de padding: 30px; et de background-origin: content-box;, la zone
d'affichage des arrière-plans est considérablement réduite. Les Zozor sont donc affichés
en plus petit !

Image utilisateurImage utilisateur
Les deux dernières valeurs possibles

Car ce n'est pas tout !

En plus de longueurs en pixels ou en pourcentages et de auto, background-size peut en effet accepter une autre valeur parmi les deux suivantes :

  • contain

  • cover

Ces deux valeurs permettent d'adapter notre image automatiquement à la zone d'affichage des fonds.

contain demande au navigateur de modifier les dimensions de l'image de sorte qu'elle soit la plus grande possible et entièrement contenue dans sa zone d'affichage.
cover, quant à elle, permet à l'image d'être la plus petite possible tout en couvrant totalement sa zone d'affichage.

Bien entendu, les proportions sont automatiquement conservées.

Un petit exemple s'impose !

background-size: contain;

background-size: cover;

Image utilisateurImage utilisateurImage utilisateurImage utilisateur

Une multitude de fonds

Après toutes ces nouvelles propriétés pas forcément évidentes à appréhender, je vous propose de souffler un peu avec background-image.

Oui, je sais, vous connaissez déjà cette propriété : elle permet d'indiquer le chemin de l'image à afficher en fond.
On l'a déjà utilisée plusieurs fois dans ce chapitre.

Mais, depuis CSS3, cette propriété accepte plusieurs fonds ! Il est ainsi possible d'appliquer plusieurs arrière-plans sur un même élément HTML et ça, c'est tout nouveau et très pratique ! :D

La première image indiquée sera celle qui sera affichée au-dessus des autres. En toute logique, la dernière sera alors celle affichée sous toutes les autres. Un exemple ?

div
{
    /* Les dimensions de la <div> */
    width: 179px;
    height: 300px;

    /* Une petite bordure */
    border: 3px solid #000;

    /* On ne veut pas que les fonds se répètent */
    background-repeat: no-repeat;

    /* Et on définit DEUX fonds ! */
    background-image: url('zozor.png'),url('zozor.jpg');

    /* Je rappelle que, dans nos exemples, "zozor.png" est notre
    petit Zozor, tandis que "zozor.jpg" est le grand. */
}
Image utilisateur

Si nous souhaitons configurer un peu mieux nos arrière-plans, il suffit d'utiliser les propriétés CSS habituelles en séparant chaque valeur par une virgule.

Ainsi, si nous souhaitons répéter horizontalement le petit fond et ne pas répéter le grand fond, nous nous y prendrons de cette manière :

div
{
    /* [...] */

    background-image: url('zozor.png'),url('zozor.jpg');
    background-repeat: repeat-x, no-repeat;
    
    /* La première valeur est appliquée à la première image définie,
    la seconde valeur est appliquée à la seconde image définie, etc. */
}

Nous pouvons également utiliser les propriétés que nous avons vues dans ce chapitre. Essayons un méga-mix ! :soleil:

div
{
    /* On fixe les dimensions, comme d'habitude !*/
    width: 139px;
    height: 260px;

    /* Une marge interne pour que ce soit plus rigolo */
    padding: 20px;

    /* Une bordure noire et un fond rouge, pour mieux voir */
    border: 3px dashed #000;
    background-color: red;

    /* Définition de nos deux images de fond */
    background-image: url('zozor.png'),url('zozor.jpg');
    
    /* Les deux images ont leur origine en haut à
    gauche de l'élément, bordure comprise*/
    background-origin: border-box;

    /* On ne répète que la première, horizontalement */
    background-repeat: repeat-x, no-repeat;
    
    /* Le petit Zozor n'est affiché que dans la zone de contenu,
    tandis que le grand est affiché dans tout l'élément */
    background-clip: content-box, border-box;

    /* Le petit Zozor fait environ le tiers de sa zone d'affichage,
    alors qu'on conserve les dimensions du grand Zozor */
    background-size: 33%, auto;
    
}

Le résultat de tout ce joyeux bazar est affiché dans la zone secrète ci-dessous.
Avant de le regarder, je vous conseille vivement d'essayer de prévoir ce que ça peut donner : c'est en se torturant l'esprit que l'on apprend ! ;)

Image utilisateur

Alors, vous y étiez presque ?

Si non, rassurez-vous : vous ne devriez pas être le seul !
Cet exemple, particulièrement tordu, vous permet de voir que nous pouvons combiner tout ce qu'on a vu dans ce chapitre. Le résultat ci-dessus n'est pas franchement très beau, mais je suis certain que vous saurez utiliser ces propriétés afin d'obtenir des rendus intéressants !

Gérer nos arrière-plans est devenu bien plus complet avec l'arrivée de CSS3. Les propriétés que nous avons vues vont vous permettre de faire des choses impossibles à réaliser auparavant, à moins d'utiliser des astuces qui salissaient votre code.

Si vous n'avez pas compris toutes les subtilités de ce chapitre, je vous invite à faire une pause et à y revenir plus tard à tête reposée : vous verrez que ce n'est au final pas si difficile que ça dès que la logique a été saisie. :)

Mais on me signale à l'oreillette que nous n'en avons pas encore fini avec les arrière-plans... Qui a parlé de dégradés ? :-°

Exemple de certificat de réussite
Exemple de certificat de réussite