Propriété CSS background-attachment

La propriété background-attachment définit si background-image est fixé ou elle défile avec le contenu de l'élément.

Background-attachment a trois valeurs: fixed, scroll et local. Quand on a la valeur "scroll", le background-image défilera avec la page. C'est la valeur initiale.

Quand on a la valeur "fixed", le background-image restera fixé au clôture. Même si l'élément a un méchanisme de défilement, l'arrière-plan ne se déplace pas avec la page.

Quand on a la valeur "local", le background-image va défiler avec le contenu de l'élément.

Valeur initiale	scroll
Apppliquée à	Tous les éléments. Elle est appliquée aussi à ::first-letter et ::first-line.
Héritée	Non.
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.backgroundAttachment = "scroll";

Syntaxe

background-attachment: scroll | fixed | local | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body  {
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-size: 400px 100px
      }
    </style>
  </head>
  <body>
    <h2>Exemple de background-attachment</h2>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas..</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>L'image du fond défile avec la page. Essayez de défiler vers le bas.</p>
    <p>Si vous ne voyez aucune barre de défilement, essayez de redimensionner la fenêtre de navigateur.</p>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple suivant la propriété background-image est "fixed" est ne se déplace pas avec la page.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body  {
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 400px 100px
      }
    </style>
  </head>
  <body>
    <h2>Exemple de background-attachment</h2>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>L'image du fond est fixée. Essayez de défiler la page vers le bas.</p>
    <p>Si vous ne voyez aucune barre de défilement, essayez de redimensionner la fenêtre de navigateur.</p>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple, vous devez défiler la page vers le bas pour voir comment l'image du fond fixée disparaît.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .example {
      background-image: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
      min-height: 500px;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de background-attachment</h2>
    <p> Défile la page pour voir l'effet. </p>
    <div class="example"></div>
    <div style="height:800px;background-color:#1c87c9;"></div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
scroll	L’image d’arrière-plan défile avec un élément. La valeur par défaut.
fixed	L'image d'arrière-plan est fixe par rapport au niveau d'affichage, de sorte que l'arrière-plan reste fixe.
local	L’image d’arrière-plan est fixe par rapport au contenu de l’élément (défile quand un élément défile).
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de l'élément parent.


4.0+	25.0+	5.0+	11.5+

4.0+

25.0+

5.0+

11.5+

Propriété CSS background-attachment

Syntaxe

Exemple

Exemple

Exemple

Valeurs

Support de Navigateurs

Pratiquez vos connaissances

Propriété CSS background-attachment

Syntaxe

Exemple

Exemple

Exemple

Valeurs

Support de Navigateurs

Pratiquez vos connaissances

Ressources Associées