CSS: sett inn bilde - det er slik det fungerer
I dette praktiske tipset forklarer vi hvordan du setter inn et bilde ved hjelp av CSS. I utgangspunktet kan bilder bare settes inn her i form av bakgrunnsbilder. Det er imidlertid ganske tilstrekkelig.
Sett inn bilde i CSS
Hvis du for eksempel vil inkludere et bilde i overskriften ved hjelp av CSS, for eksempel logoen din, må du erklære følgende egenskaper under #header:
- "bakgrunn: url (image.webp) #FFFFFF;"
- Her forstås "bild.webp" som URL-en til bildet ditt, enten i forhold til css-filen eller som en absolutt adresse på stasjonen.
- Med fargen deklarerer du bakgrunnsfargen på nettstedet ditt.
- Bildet kan nå plasseres ved å bruke en nøyaktig posisjon, for eksempel: "bakgrunnsposisjon: 100px 100px;" eller via relativ informasjon bestemt av vinduskanten, for eksempel "bakgrunnsposisjon: nede til høyre;".
- Slik at bildet ikke gjentar seg kontinuerlig, kan du spesifisere en "nei-repetisjon" under egenskapen "bakgrunn-gjenta". Det ser slik ut: "bakgrunn-gjenta: ingen-gjenta;".
- Med egenskapen "bakgrunnsvedlegg" bestemmer du om bildet beveger seg med rullingen eller forblir på et fast sted på siden: "bakgrunnsvedlegg: fast;".
- Egenskapene er spesifisert i CSS-filen uten anførselstegn.
I det neste praktiske tipset, les hvordan du integrerer en CSS-fil ved hjelp av HTML.