CSS: insérer une image - c'est comme ça que ça marche
Dans cette astuce pratique, nous expliquons comment insérer une image à l'aide de CSS. Fondamentalement, les images ne peuvent être insérées ici que sous forme d'images d'arrière-plan. Mais cela est tout à fait suffisant.
Insérer une image en CSS
Par exemple, si vous souhaitez inclure une image dans l'en-tête à l'aide de CSS, comme votre logo, déclarez les propriétés suivantes sous #header:
- "background: url (image.webp) #FFFFFF;"
- Ici, "bild.webp" est compris comme l'URL de votre image par rapport au fichier css ou comme une adresse absolue sur votre lecteur.
- Avec la couleur, vous déclarez la couleur de fond sur votre site Web.
- L'image peut maintenant être positionnée en utilisant une position exacte, telle que: "background-position: 100px 100px;" ou via des informations relatives déterminées par le bord de la fenêtre, telles que "background-position: bottom right;".
- Pour que votre image ne se répète pas en continu, vous pouvez spécifier une "non-répétition" sous la propriété "background-repeat". Il ressemble à ceci: "background-repeat: no-repeat;".
- Avec la propriété "background-attachment", vous déterminez si l'image se déplace avec le défilement ou reste à un endroit fixe sur la page: "background-attachment: fixed;".
- Les propriétés sont spécifiées dans le fichier CSS sans guillemets.
Dans le prochain conseil pratique, lisez comment intégrer un fichier CSS à l'aide de HTML.