Recherche une chaîne de caractères dans un ensemble de caractères
Définition et utilisation de la propriété background-origin
La propriété background-origin indique où l'image d'arrière-plan doit être positionnée.
|
Valeur par défaut : |
padding-box |
|
Héritée : |
no |
|
Animer : |
no |
|
Version: |
CSS3 |
|
Syntaxe JavaScript : |
object.style.backgroundOrigin="content-box" |
Remarque : Si la propriété background-attachment est sur « fixe », cette propriété n'a aucun effet.
Appui de navigateur de la propriété background-origin
Les nombres dans le tableau spécifient la première version de navigateur qui prend totalement en charge la propriété.
Propriété | Navigateur |
| | | | |
|
background-clip |
4.0 |
9.0 |
4.0 |
3.0 |
10.5 |
Syntaxe CSS de la propriété background-origin
background-origin: padding-box|border-box|content-box|initial|inherit;
Valeurs de la propriété propriété background-origin
Valeur | Description |
|---|---|
|
padding-box |
Valeur par défaut. L'image de l’arrière plan commence à partir du coin supérieur gauche du bord de padding |
|
border-box |
L'image de l’arrière plan commence à partir du coin supérieur gauche de la bordure |
|
content-box |
L'image de l’arrière plan commence à partir du coin supérieur gauche du contenu |
|
initial |
Définit cette propriété à sa valeur par défaut. |
|
inherit |
Hérite cette propriété de son élément parent. |
<!DOCTYPE html>
<html>
<head>
<style>
div{width:250px;border: 10px dashed black; margin:5px;padding:
10px;display: inline-block;}
#exemple1 {
background: url(https://www.oujood.com/images/nature.jpg);
background-repeat: no-repeat;
}
#exemple2 {
background: url(https://www.oujood.com/images/nature.jpg);
background-repeat: no-repeat;
background-origin: border-box;
}
#exemple3 {
background: url(https://www.oujood.com/images/nature.jpg);
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<div id="exemple1">
<h3>Sans background-origin </h3>
<p>Pas de background-origin (background-origine est par défaut
définie sur padding-box):</p>
</div>
<div id="exemple2">
<h3>background-origin: border-box</h3>
<p><br><br>background-origin: border-box:</p>
</div>
<div id="exemple3">
<h3>background-origin: content-box</h3>
<p><br><br>background-origin: content-box:</p>
</div>
</body>
</html>
Par Gerywa 11 Janvier 2016