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>

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>

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>

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.

Support de Navigateurs

4.0+ 25.0+ 5.0+ 11.5+


Trouvez-vous cela utile?

Articles Associées