CSS: infoga bild - det är så det fungerar
I detta praktiska tips förklarar vi hur man sätter in en bild med CSS. I princip kan bilder bara sättas in här i form av bakgrundsbilder. Men det är ganska tillräckligt.
Infoga bild i CSS
Om du till exempel vill inkludera en bild i rubriken med hjälp av CSS, till exempel din logotyp, förklara följande egenskaper under #header:
- "bakgrund: url (image.webp) #FFFFFF;"
- Här förstås "bild.webp" som webbadressen till din bild antingen relativt till css-filen eller som en absolut adress på din enhet.
- Med färgen förklarar du bakgrundsfärgen på din webbplats.
- Bilden kan nu placeras med en exakt position, till exempel: "bakgrundsposition: 100px 100px;" eller via relativ information bestämd av fönsterkanten, till exempel "bakgrundsposition: nere till höger;".
- Så att din bild inte upprepar sig själv kontinuerligt kan du ange en "ingen upprepning" under egenskapen "bakgrund-upprepning". Det ser ut så här: "bakgrund-upprepning: ingen-upprepning;".
- Med egenskapen "bakgrund-bilaga" bestämmer du om bilden rör sig med rullningen eller förblir på en fast plats på sidan: "bakgrund-bilaga: fix;".
- Egenskaperna anges i CSS-filen utan citattecken.
I nästa praktiska tips, läs hur du integrerar en CSS-fil med HTML.