CSS - Arrière-plans
Ce chapitre vous apprend à définir les arrière-plans de divers éléments HTML. Vous pouvez définir les propriétés d'arrière-plan suivantes d'un élément -
le background-color La propriété est utilisée pour définir la couleur d'arrière-plan d'un élément.
le background-image La propriété est utilisée pour définir l'image d'arrière-plan d'un élément.
le background-repeat est utilisée pour contrôler la répétition d'une image en arrière-plan.
le background-position La propriété est utilisée pour contrôler la position d'une image en arrière-plan.
le background-attachment est utilisée pour contrôler le défilement d'une image en arrière-plan.
le background property est utilisée comme raccourci pour spécifier un certain nombre d'autres propriétés d'arrière-plan.
Définir la couleur d'arrière-plan
Voici l'exemple qui montre comment définir la couleur d'arrière-plan d'un élément.
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>Cela produira le résultat suivant -
Définir l'image d'arrière-plan
Nous pouvons définir l'image d'arrière-plan en appelant les images stockées locales comme indiqué ci-dessous -
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>Il produira le résultat suivant -
Répéter l'image d'arrière-plan
L'exemple suivant montre comment répéter l'image d'arrière-plan si une image est petite. Vous pouvez utiliser la valeur sans répétition pour la propriété background-repeat si vous ne voulez pas répéter une image, dans ce cas, l'image ne s'affichera qu'une seule fois.
Par défaut , la propriété background-repeat aura une valeur de répétition .
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Il produira le résultat suivant -
L'exemple suivant montre comment répéter l'image d'arrière-plan verticalement.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Il produira le résultat suivant -
L'exemple suivant montre comment répéter l'image d'arrière-plan horizontalement.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Il produira le résultat suivant -
Définir la position de l'image d'arrière-plan
L'exemple suivant montre comment définir la position de l'image d'arrière-plan à 100 pixels du côté gauche.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Il produira le résultat suivant -
L'exemple suivant montre comment définir la position de l'image d'arrière-plan à 100 pixels du côté gauche et à 200 pixels du haut.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Il produira le résultat suivant -
Définir la pièce jointe en arrière-plan
La pièce jointe en arrière-plan détermine si une image d'arrière-plan est fixe ou défile avec le reste de la page.
L'exemple suivant montre comment définir l'image d'arrière-plan fixe.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Il produira le résultat suivant -
L'exemple suivant montre comment définir l'image d'arrière-plan défilante.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Il produira le résultat suivant -
Propriété sténographique
Vous pouvez utiliser la propriété background pour définir toutes les propriétés d'arrière-plan à la fois. Par exemple -
<p style = "background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>