Praktiska steg:
- Välj bakgrundsfärg (background-color): Ange en färgkod, tex #ffffff för vitt.
- Välj bakgrundsbild (background-image): Ange bildens sökväg, tex url("bild.jpg").
- Ställ in bakgrundsupprepning (background-repeat): Tex "no-repeat" för att endast visa bilden en gång.
- Ställ in bakgrundsposition (background-position): Tex "center" för att centrera bilden.
- Ställ in bakgrundsstorlek (background-size): Tex "cover" för att täcka hela elementet eller "contain" för att behålla bildens originalstorlek.
CSS-exempel:
h1 {
background-color: #ff0000;
background-image: url("bild.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
Tillgänglighetsförbättringar:
- Ange alltid en bakgrundsfärg även när du använder en bild, för att säkerställa läsbarhet med bilder inaktiverade.
- Använd kontrasterande färger mellan text och bakgrund för att förbättra läsbarheten.
- Använd semantiska element (tex för rubrik) och undvik att använda bakgrundsbilder för att styla element.