CSS: indsæt billede - det er sådan det fungerer
I dette praktiske tip forklarer vi, hvordan man indsætter et billede ved hjælp af CSS. Grundlæggende kan billeder kun indsættes her i form af baggrundsbilleder. Det er dog ganske tilstrækkeligt.
Indsæt billede i CSS
Hvis du f.eks. Vil inkludere et billede i overskriften ved hjælp af CSS, såsom dit logo, skal du erklære følgende egenskaber under #header:
- "baggrund: url (image.webp) #FFFFFF;"
- Her forstås "bild.webp" som URL til dit billede enten i forhold til css-filen eller som en absolut adresse på dit drev.
- Med farven erklærer du baggrundsfarven på dit websted.
- Billedet kan nu placeres ved hjælp af en nøjagtig position, såsom: "baggrundsposition: 100px 100px;" eller via relativ information bestemt af vindueskanten, såsom "baggrundsposition: nederst til højre;".
- Så dit billede ikke gentager sig selv kontinuerligt, kan du angive en "ingen gentagelse" under egenskaben "baggrund-gentagelse". Det ser sådan ud: "baggrund-gentagelse: ingen gentagelse;".
- Med egenskaben "baggrund-vedhæftet fil" bestemmer du, om billedet bevæger sig med rulle eller forbliver et fast sted på siden: "baggrund-vedhæftet fil: fast;".
- Egenskaberne er specificeret i CSS-filen uden anførselstegn.
Læs det næste praktiske tip, hvordan du integrerer en CSS-fil ved hjælp af HTML.