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 :

fonction strpbrk, strpbrk

Recherche une chaîne de caractères dans un ensemble de caractères

fonction setlocale

Modifie les informations de localisation

Géolocalisation en temps réel et Recherche d'adresses IP inversées REST API

Il permet de trouvez la ville, la région, le pays, le continent, la latitude, la longitude, le fuseau horaire, le décalage UTC, la devise, la langue, l'asn, l'organisation, l'indicatif téléphonique du pays, le membre de l'Union européenne (UE) à partir d'une adresse IP.