Table des matières:
Vidéo: 12 - HTML & CSS - Image du fond 2025
Vous pouvez utiliser la balise img pour ajouter une image à votre page HTML5, mais parfois vous voulez utiliser les images comme arrière-plan pour un élément spécifique ou pour la page entière. Vous pouvez utiliser la règle CSS background-image pour appliquer une image d'arrière-plan à une page ou à des éléments d'une page.
Les images d'arrière-plan sont faciles à appliquer. Le code pour backgroundImage. html montre comment:
backgroundImage. corps html {background-image: url ("cordeBG.jpg");} h1 {image-arrière-plan: url ("ropeBGLight.jpg");} p {background-color: white; background-color: rgba (255, 255, 255, 85);}Utilisation des images d'arrière-plan
Le titre utilise une version plus claire de l'arrière-plan et le paragraphe utilise un fond de couleur claire avec transparence.
Le titre utilise une version plus claire de l'arrière-plan et le paragraphe utilise un arrière-plan de couleur unie avec une transparence claire.
Joindre l'image d'arrière-plan à un élément via CSS n'est pas difficile. Voici les étapes générales:
-
Trouvez ou créez une image appropriée et placez-la dans le même répertoire que la page afin qu'elle soit facile à trouver.
-
Attachez la règle de style d'image d'arrière-plan à la page à laquelle vous souhaitez appliquer l'image.
Si vous souhaitez appliquer l'image à la page entière, utilisez l'élément.
-
Dites CSS où background-image est en ajoutant un identifiant d'URL.
Utilisez le mot-clé url () pour indiquer que l'adresse suivante est une adresse.
-
Entrez l'adresse de l'image.
C'est plus facile si l'image est dans le même répertoire que la page. Si c'est le cas, vous pouvez simplement taper le nom de l'image. Assurez-vous d'entourer l'URL avec des guillemets.
-
Testez votre image d'arrière-plan en affichant la page Web dans votre navigateur.
Beaucoup d'erreurs peuvent survenir avec les images d'arrière-plan. L'image peut ne pas être dans le bon répertoire, vous avez peut-être mal orthographié son nom, ou vous avez peut-être oublié le bit.
Vérification des antécédents
Il est assez facile d'ajouter des arrière-plans, mais les images d'arrière-plan ne sont pas parfaites. Voici une page avec un joli fond. Malheureusement, le texte est difficile à lire.
Les images d'arrière-plan peuvent ajouter beaucoup de zing à vos pages, mais elles peuvent introduire certains problèmes, tels que
-
Les images d'arrière-plan peuvent ajouter à la taille du fichier. Les images sont très volumineuses, donc une grande image de fond peut rendre votre page beaucoup plus grande et plus difficile à télécharger.
-
Certaines images peuvent rendre votre page plus difficile à lire. Une image en arrière-plan peut interférer avec le texte, de sorte que la page peut être beaucoup plus difficile à lire.
-
Les bonnes images ne font pas de bons arrière-plans. Une bonne image attire l'attention et attire l'attention. Le travail d'une image de fond est de fondre en arrière-plan. Si vous voulez que les gens regardent une image, intégrez-la. Les images d'arrière-plan ne doivent pas sauter au premier plan.
-
Les fonds doivent être à faible contraste. Si votre image d'arrière-plan est sombre, vous pouvez rendre le texte clair visible. Si l'image d'arrière-plan est claire, le texte sombre apparaît. Si votre image a des zones de lumière et d'obscurité (comme presque toutes les bonnes images), il sera impossible de trouver une couleur de texte qui semble bonne contre elle.