Propriété CSS background-origin
La propriété CSS background-origin définit la zone de positionnement de l'arrière-plan d'une image d'arrière-plan.
La propriété background-origin fait partie des propriétés CSS3.
Si background-attachment est défini sur fixed, la propriété background-origin est ignorée.
| Valeur initiale | padding-box |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.backgroundOrigin = "content-box"; |
Syntaxe
Syntaxe de la propriété CSS background-origin
css
background-origin: padding-box | border-box | content-box | initial | inherit;Exemple de la propriété background-origin :
Exemple de la propriété CSS background-origin avec la valeur padding-box
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example1 {
border: 5px dashed #666;
padding: 35px;
background: url("https://fr.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin is set to "padding-box".</p>
<div class="example1">
<h2>Hello world.</h2>
<p> Some text for example.</p>
</div>
</body>
</html>Résultat
Voici un exemple illustrant la différence entre padding-box et content-box.
Exemple de la propriété background-origin avec les valeurs "padding-box" et "content-box" :
Exemple de la propriété CSS background-origin avec les valeurs padding-box et content-box
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example1 {
border: 5px dashed #666;
padding: 35px;
background: url("https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-repeat: no-repeat;
background-origin: padding-box;
}
.example2 {
border: 5px dashed #666;
padding: 35px;
background: url("https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>
<div class="example1">
<h2>Hello world</h2>
<p> Some text for example.</p>
</div>
<p>Here the background-origin is set to "content-box".</p>
<div class="example2">
<h2>Hello world</h2>
<p> Some text for example.</p>
</div>
</body>
</html>Dans l'exemple ci-dessous, voyez comment définir deux images d'arrière-plan pour un élément div avec des valeurs différentes.
Exemple de la propriété background-origin avec des valeurs différentes :
Exemple de la propriété CSS background-origin avec les valeurs content-box et border-box
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example1 {
border: 5px double black;
padding: 25px;
background: url("https://fr.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("https://fr.w3docs.com/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-origin: content-box, border-box;
}
#example2 {
border: 5px double black;
padding: 25px;
background: url("https://fr.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("https://fr.w3docs.com/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-origin: content-box, padding-box;
}
#example3 {
border: 5px double black;
padding: 25px;
background: url("https://fr.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("https://fr.w3docs.com/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-origin: content-box, content-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin: content-box, border-box; is set:</p>
<div id="example1">
<h2>Hello World</h2>
<p>The first background-image starts from the upper left corner of the content.</p>
<p>The second background-image starts from the upper left corner of the border.</p>
</div>
<p>Here the background-origin: content-box, padding-box:</p>
<div id="example2">
<h2>Hello World</h2>
<p>The first background image starts from the upper left corner of the content.</p>
<p>The second background-image starts from the upper left corner of the padding edge.</p>
</div>
<p>Here the background-origin: content-box, content-box; is set:</p>
<div id="example3">
<h2>Hello World</h2>
<p>Both background images start from the upper left corner of the content.</p>
</div>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| border-box | La position de l'arrière-plan est relative à la boîte de bordure et l'image d'arrière-plan commence dans le coin supérieur gauche de la bordure. | Tester » |
| padding-box | La position de l'arrière-plan est relative à la boîte de remplissage et l'image d'arrière-plan commence dans le coin supérieur gauche du bord de remplissage. Il s'agit de la valeur par défaut. | Tester » |
| content-box | La position de l'arrière-plan est relative à la boîte de contenu et l'image d'arrière-plan commence dans le coin supérieur gauche du contenu. | Tester » |
| initial | Définit la propriété sur sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que contrôle la propriété CSS background-origin ?