oujood.com

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.
La propriété background-origin peut prendre les mêmes valeurs que la propriété background-clip : border-box, padding-box, content-box.

chercher |

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(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



Voir aussi nos tutoriel :

Balise font

Non pris en charge HTML5. Obsolète en HTML 4.01. Définit la police, la couleur et la taille du texte

Balise title

Définit un titre pour le document

fonction strcoll, strcoll

Comparaison de chaînes localisées