background-attachment
Baseline
Large disponibilité
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété CSS background-attachment définit si la position d'une image d'arrière-plan est fixe par rapport à la zone d'affichage, ou si elle défile avec son bloc englobant.
Exemple interactif
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
background-attachment: fixed, scroll;
background-attachment: scroll, fixed;
<section id="default-example">
<div id="example-element">
<p>
D'ici à là<br />
de là à ici,<br />
Des choses amusantes<br />
Sont partout.
</p>
<p>--Dr. Seuss</p>
</div>
</section>
body {
overflow: scroll;
}
#default-example {
height: 600px;
}
#example-element {
max-width: 20rem;
height: 100%;
background:
url("/shared-assets/images/examples/lizard.png") right 3rem top 1rem / 15rem
no-repeat,
url("/shared-assets/images/examples/moon.jpg") center / 10rem;
font-size: 1.2rem;
font-weight: bolder;
overflow: auto;
padding: 20px;
color: red;
text-shadow:
0 0 0.5rem black,
0 0 0.5rem black;
}
Syntaxe
/* Valeurs avec un mot-clé */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
/* Valeurs globales */
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: unset;
La propriété background-attachment est définie avec un ou plusieurs mots-clés de la liste suivante, séparés par des virgules.
Valeurs
fixed-
Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (viewport en anglais). Même si un élément dispose d'un mécanisme de défilement, l'arrière-plan ne se déplace pas avec l'élément. Si cette valeur est définie, la propriété
background-originest ignorée. local-
Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur.
scroll-
Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément.
Définition formelle
| Valeur initiale | scroll |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
background-attachment =
<attachment>#
<attachment> =
scroll |
fixed |
local
Exemples
Exemple simple
HTML
Nous incluons une liste non ordonnée (<ul>) avec quelques éléments de liste (<li>).
<ul>
<li>Un poisson</li>
<li>Deux poissons</li>
<li>Poisson rouge</li>
<li>Poisson bleu</li>
<li>Poisson noir</li>
<li>Poisson bleu</li>
<li>Vieux poisson</li>
<li>Nouveau poisson.</li>
<li>Celui-ci a une petite étoile.</li>
<li>Celui-ci a une petite voiture.</li>
<li>Dis ! Quel lot</li>
<li>De poissons il y a.</li>
</ul>
CSS
Nous définissons une image de fond (background-image) et réglons la propriété background-attachment sur fixed. Nous incluons également une height, une width et un débordement (overflow) pour garantir que l'élément défile.
ul {
background-image: url("star-solid.gif");
background-attachment: fixed;
width: 300px;
height: 70px;
overflow: scroll;
}
Résultat
Notez comment l'arrière-plan reste fixe par rapport à la zone d'affichage de la liste lorsque vous faites défiler le texte débordant.
Gestion de plusieurs arrière-plans
Cette propriété prend en charge plusieurs images d'arrière-plan. Vous pouvez définir une valeur <attachment> différente pour chaque image, séparées par des virgules. Chaque image est associée au type <attachment> correspondant, de la première à la dernière.
HTML
Nous incluons tout le poème de Dr. Seuss.
<div>
<ul>
<li>Un poisson</li>
<li>Deux poissons</li>
<li>Poisson rouge</li>
<li>Poisson bleu</li>
<li>Poisson noir</li>
<li>Poisson bleu</li>
<li>Vieux poisson</li>
<li>Nouveau poisson.</li>
<li>Celui-ci a une petite étoile.</li>
<li>Celui-ci a une petite voiture.</li>
<li>Dis ! Quel lot</li>
<li>De poissons il y a.</li>
<li>Oui. Certains sont rouges. Et certains sont bleus.</li>
<li>Certains sont vieux. Et certains sont nouveaux.</li>
<li>Certains sont tristes.</li>
<li>Et certains sont joyeux.</li>
<li>Et certains sont très, très mauvais.</li>
<li>Pourquoi sont-ils</li>
<li>Tristes et joyeux et mauvais ?</li>
<li>Je ne sais pas.</li>
<li>Allez demander à votre père.</li>
<li>Certains sont maigres.</li>
<li>Et certains sont gros.</li>
<li>Le gros a</li>
<li>Un chapeau jaune.</li>
<li>De là à ici, d'ici à là,</li>
<li>Des choses amusantes</li>
<li>Sont partout.</li>
</ul>
<p>--Dr. Seuss</p>
</div>
CSS
Nous incluons une height, une width et un overflow sur le parent <div> pour garantir que le contenu défile.
Nous définissons deux images d'arrière-plan séparées par des virgules sur la liste, et réglons la propriété background-attachment sur fixed, scroll, ce qui signifie que la première image d'arrière-plan sera fixed et la seconde sera scroll. Nous réglons la propriété background-repeat pour que les deux images d'arrière-plan se répètent verticalement, en les séparant avec la propriété background-position.
div {
width: 300px;
height: 200px;
overflow: scroll;
}
ul {
background-image: url("star-solid.gif"), url("star-transparent.gif");
background-attachment: fixed, scroll;
background-repeat: repeat-y;
background-position:
0 0,
100px 0;
}
Résultat
Notez comment la première image d'arrière-plan est fixe par rapport à la zone d'affichage tandis que la seconde image d'arrière-plan est fixe par rapport à la liste.
Spécifications
| Spécification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-attachment |
Compatibilité des navigateurs
Voir aussi
- Les autres propriétés CSS
background: - Utiliser plusieurs arrière-plans
- Le module de fond et de bordures CSS