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 ?
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 id="Welcome-to-TutorialsPoint">Welcome to TutorialsPoint</h1>
<h3 id="Set-Background-image-for-the-body-element">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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Cartes empilées avec un positionnement collant et une pincée de sass
Apr 03, 2025 am 10:30 AM
L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.
Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress
Apr 02, 2025 am 04:27 AM
Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?
Comparaison des navigateurs pour une conception réactive
Apr 02, 2025 pm 06:25 PM
Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire
Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»?
Apr 05, 2025 pm 05:51 PM
Questions sur les zones de slash violet dans les dispositions flexibles Lorsque vous utilisez des dispositions flexibles, vous pouvez rencontrer des phénomènes déroutants, comme dans les outils du développeur (D ...
