Maison >interface Web >tutoriel CSS >Comment définir une image d'arrière-plan pour l'élément body en utilisant CSS ?
Comment définir une image d'arrière-plan pour l'élément body en utilisant CSS ?
- PHPzavant
- 2023-09-08 18:33:023403parcourir
CSS (Cascading Style Sheets) est un outil puissant pour concevoir l'apparence visuelle de votre site Web. La propriété background-image est l'une des nombreuses fonctionnalités CSS utilisées pour définir une image d'arrière-plan à l'aide de la propriété background-image.
Dans le développement Web, les images d'arrière-plan constituent une partie importante de la conception globale du site Web. L'arrière-plan par défaut de l'élément body en HTML est blanc, mais avec seulement quelques lignes de code CSS, vous pouvez remplacer l'arrière-plan de votre page Web par n'importe quelle image.
Définir l'image d'arrière-plan en CSS
Définir une image d'arrière-plan est un excellent moyen d'améliorer l'attrait visuel de votre site Web et peut être facilement réalisé avec des éléments CSS et du corps. Cela crée un look unique et merveilleux qui ajoute une touche professionnelle au site Web. Ici, nous allons apprendre comment définir une image d'arrière-plan pour l'élément body en utilisant CSS.
Grammaire de base
Définissez l'image d'arrière-plan de l'élément body via CSS en utilisant la syntaxe suivante :
body {
background-image: url('path to the image.jpg');
}
La syntaxe ci-dessus définit l'image d'arrière-plan de l'élément body sur l'image située dans "path/to/image.jpg". La fonction url() est utilisée pour spécifier le chemin de l'image.
Utilisez l'élément body pour définir l'image d'arrière-plan
Maintenant, nous allons apprendre quelques étapes simples que vous pouvez suivre pour définir une image d'arrière-plan pour l'élément body afin que votre site Web se démarque davantage.
Étape 1 : Choisissez une image
Avant d'ajouter une image d'arrière-plan au site Web à l'aide de l'élément body, nous devons choisir une image. Cette image peut être une photo, un graphique ou un motif.
Étape 2 : Ajouter une image au HTML
Dans cette étape, ajoutez l'image au code HTML. Pour ce faire, utilisez le code suivant.
<body style="background-image: url(https://www.tutorialspoint.com/dip/images/einstein.jpg);">
ou
<style>
body {background-image: url("https://www.tutorialspoint.com/dip/images/einstein.jpg");}
</style>
Étape 3 : Styliser l'image d'arrière-plan à l'aide de CSS
Après avoir ajouté l'image au code HTML, nous stylisons l'image en utilisant CSS. Utilisez le code suivant pour ajuster la position et la taille de l'image.
body {
background-size: cover;
background-repeat: no-repeat;
}
Nous utilisons la propriété background-size pour redimensionner l'image afin de couvrir tout l'arrière-plan, tandis que "no-repeat" garantit que l'image n'est pas répétée.
Étape 4 : Combinez le code HTML et CSS
La traduction chinoise deExemple
est :Exemple
Ici, nous combinerons HTML et CSS pour définir l'image d'arrière-plan
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://www.tutorialspoint.com/dip/images/einstein.jpg');
background-repeat: no-repeat;
background-size: cover;
}
h1,h3{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Set Background image for the body element</h3>
</body>
</html>
Pour personnaliser davantage l'image d'arrière-plan, des propriétés CSS supplémentaires peuvent être utilisées, telles que l'opacité, la position de l'arrière-plan et la pièce jointe à l'arrière-plan.
Conclusion
Définir une image d'arrière-plan pour les éléments du corps du texte de votre site Web est un moyen simple mais efficace. En suivant les étapes ci-dessus, vous pouvez facilement ajouter des images à votre site Web et les personnaliser en fonction de vos besoins.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!