La propriété CSS3 background-origin

La propriété background-origin est utilisée pour spécifier la zone de positionnement des images d'arrière-plan. Il peut prendre les mêmes valeurs que la propriété background-clip : border-box, padding-box, content-box.

Les propriétés CSS

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

Google Chrome

Internet Explorer

Firefox

Safari

Opera

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.

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
<style>
div{width:250px;border: 10px dashed black;     margin:5px;padding:
10px;display: inline-block;}
#exemple1 {   
    background: url(http://www.oujood.com/images/nature.jpg);
    background-repeat: no-repeat;
}
#exemple2 {
    background: url(http://www.oujood.com/images/nature.jpg);
    background-repeat: no-repeat;
    background-origin: border-box;
}
#exemple3 {
    background: url(http://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
  • HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
    Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    fonction idate">idate()

    Formate une date/heure locale en tant qu'entier

    font-weight

    Indique le poids d'une police

    fonction str_getcsv, str_getcsv

    Analyse une chaîne de caractères CSV dans un tableau