Maison > Article > interface Web > 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:023382parcourir

Comment définir une image darrière-plan pour lélément body en utilisant CSS ?

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);">

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

Exemple

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!

css html 样式表 background

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Utilisez l'animation CSS3 pour rendre l'expérience utilisateur plus fluide et ne plus compter sur jQueryArticle suivant：Utilisez l'animation CSS3 pour rendre l'expérience utilisateur plus fluide et ne plus compter sur jQuery

Articles Liés

Voir plus