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
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
