CSS plusieurs arrière-plans

Table des matières

    Afficher la table des matières

Dans ce chapitre, vous apprendrez comment ajouter plusieurs images d'arrière-plan à un élément.

Vous découvrirez également les propriétés suivantes :

background-size
background-origin
background-clip

In this chapter you will learn how to add multiple background images to one element.

You will also learn about the following properties:

  • background-size
  • background-origin
  • background-clip

CSS plusieurs arrière-plans

CSS vous permet d'ajouter plusieurs images d'arrière-plan pour un élément, via le Propriété background-image.

Les différentes images d'arrière-plan sont séparées par des virgules et les images sont empilés les uns sur les autres, là où la première image est la plus proche du spectateur.

L'exemple suivant comporte deux images d'arrière-plan, la première image est une fleur (alignée en bas et à droite) et la deuxième image est un fond en papier (aligné dans le coin supérieur gauche) :

Exemple

  #example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Plusieurs images d'arrière-plan peuvent être spécifiées à l'aide de l'option individuelle propriétés d'arrière-plan (comme ci-dessus) ou la propriété raccourcie background.

L'exemple suivant utilise la propriété raccourcie background (même résultat que exemple ci-dessus) :

Exemple

  #example1 {
  background: url(img_flwr.gif) right bottom 
no-repeat, url(paper.gif) left top repeat;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Taille de l'arrière-plan CSS

La propriété CSS background-size vous permet de spécifier la taille des images d'arrière-plan.

La taille peut être spécifiée en longueurs, en pourcentages ou en utilisant l'un des deux mots-clés : contenir ou couvrir.

L'exemple suivant redimensionne une image d'arrière-plan à une taille beaucoup plus petite que l'image d'origine (en utilisant des pixels) :

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Voici le code :

Exemple

#div1
{
   
background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 1px solid black;
  background: url(img_flwr.gif);
  background-size: 100px 80px;
  background-repeat: no-repeat;
  padding: 15px;
}

#example2 {
  border: 1px solid black;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<p>Resized background-image:</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>Original size of the background-image:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Les deux autres valeurs possibles pour background-size sont

contain
cover

Le mot-clé contain redimensionne l'image d'arrière-plan pour qu'elle soit aussi grande que possible (mais sa largeur et sa hauteur doivent tenir à l'intérieur de la zone de contenu). Ainsi, selon les proportions du fond l'image et la zone de positionnement d'arrière-plan, il peut y avoir certaines zones de l'arrière-plan qui n'est pas couvert par l'image d'arrière-plan.

Le mot clé cover met à l'échelle l'image d'arrière-plan afin que la zone de contenu soit entièrement recouvert par l'image d'arrière-plan (sa largeur et sa hauteur sont égales ou égales à dépasser la zone de contenu). Ainsi, certaines parties de l'image d'arrière-plan peuvent ne pas être visible dans la zone de positionnement en arrière-plan.

L'exemple suivant illustre l'utilisation de contain et cover :

Exemple

  #div1
{
    
background: url(img_flower.jpg);
    
background-size: contain;
  background-repeat: no-repeat;
}
#div2
{
    
background: url(img_flower.jpg);
    
background-size: cover;	background-repeat: no-repeat;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: contain;
}

.div2 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: cover;
}

.div3 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<h2>background-size: contain:</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>No background-size defined:</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<p>Original image:</p>
<img src="img_flwr.gif" alt="Flowers" width="224" height="162">

</body>
</html>

Définir les tailles de plusieurs images d'arrière-plan

La propriété background-size accepte également plusieurs valeurs pour la taille de l'arrière-plan. (en utilisant une liste séparée par des virgules), lorsque vous travaillez avec plusieurs arrière-plans.

L'exemple suivant comporte trois images d'arrière-plan spécifiées, avec des valeur de taille d'arrière-plan pour chaque image :

Exemple

  #example1 {
  background: url(img_tree.gif) left top 
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top 
repeat;
  background-size: 50px, 130px, auto;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
  background-size: 50px, 130px, auto;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Image d'arrière-plan en taille réelle

Maintenant, nous voulons avoir une image d'arrière-plan sur un site Web qui couvre l'ensemble fenêtre du navigateur à tout moment.

Les exigences sont les suivantes :

  • Remplissez toute la page avec l'image (pas d'espace blanc)

  • Redimensionner l'image selon vos besoins

  • Centrer l'image sur la page

  • Ne provoque pas de barres de défilement

L'exemple suivant montre comment procéder ; Utilisez l'élément <html> (l'élément <html> est toujours au moins égal à la hauteur de la fenêtre du navigateur). Définissez ensuite un arrière-plan fixe et centré dessus. Ajustez ensuite sa taille avec le propriété background-size :

Exemple

  html {
  background: url(img_man.jpg) no-repeat 
center fixed; 
  background-size: cover;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
html { 
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

body { 
  color: white; 
}
</style>
</head>
<body>

<h1>Full Page Background Image</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Image du héros

Vous pouvez également utiliser différentes propriétés d'arrière-plan sur un <div> pour créer une image de héros (une grande image avec du texte) et la placer où vous le souhaitez.

Exemple

  .hero-image {
  background: url(img_man.jpg) no-repeat center; 
  
   background-size: cover;
  height: 500px;
  position: 
   relative;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
</style>
</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">I am John Doe</h1>
    <h3>And I'm a Photographer</h3>
    <button>Hire me</button>
  </div>
</div>

<p>Page content..</p>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>

</body>
</html>

Propriété CSS background-origin

La propriété CSS background-origin spécifie où se trouve l'image d'arrière-plan. positionné.

La propriété prend trois valeurs différentes :

  • border-box - l'image d'arrière-plan commence à partir du coin supérieur gauche de la bordure

  • padding-box - (par défaut) l'image d'arrière-plan commence à partir du coin supérieur gauche du bord de remplissage

  • content-box - l'image d'arrière-plan commence à partir du coin supérieur gauche du contenu

L'exemple suivant illustre la propriété background-origin :

Exemple

 #example1
{
    border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
    
background-repeat: no-repeat;
  
background-origin: content-box;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
}

#example2 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: border-box;
}

#example3 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>
</head>
<body>

<h1>The background-origin Property</h1>

<p>No background-origin (padding-box is default):</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Propriété CSS background-clip

La propriété CSS background-clip spécifie la zone de peinture de l'arrière-plan.

La propriété prend trois valeurs différentes :

  • border-box - (par défaut) l'arrière-plan est peint jusqu'au bord extérieur de la bordure

  • padding-box - le fond est peint jusqu'au bord extérieur du rembourrage

  • content-box - l'arrière-plan est peint dans la zone de contenu

L'exemple suivant illustre la propriété background-clip :

Exemple

  #example1
{
     border: 10px dotted black;
  
padding: 35px;
  background: yellow;
  
background-clip: content-box;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
}

#example2 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: padding-box;
}

#example3 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}
</style>
</head>
<body>

<h1>The background-clip Property</h1>

<p>No background-clip (border-box is default):</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

Propriétés d'arrière-plan avancées CSS

background

Une propriété raccourcie pour définir toutes les propriétés d'arrière-plan dans une seule déclaration

background-clip

Spécifie la zone de peinture de l'arrière-plan

background-image

Spécifie une ou plusieurs images d'arrière-plan pour un élément

background-origin

Spécifie où la ou les images d'arrière-plan sont positionnées

background-size

Spécifie la taille de la ou des images d'arrière-plan