Använda CSS för att ställa in en bakgrundsbild

• Maj 19, 2024

Någonsin undrat hur webbplatser hanterar de vackra mönster och bilder som flyter bakom texten? Allt görs genom magin i Cascading Style Sheets. CSS tillåter dig inte bara att beteckna en bild för din sidas bakgrund, den låter dig också justera hur bilden visas - så att du kan få precis det utseende du vill ha.

Det grundläggande byggstenen för din bakgrundsbild är lämpligt nog "bakgrundsbild" -egenskapen. Du använder den här egenskapen för att berätta för din webbplats var bildfilen finns, enligt följande:

kropp {
bakgrund-bild: url ("image.gif");
}

Det är allt du behöver göra för att placera en bakgrundsbild för din webbsida. Naturligtvis vill du förmodligen anpassa hur bilden visas. Låt oss säga att du vill att din bild ska börja högst upp på sidan men ska centreras horisontellt istället för vänsterriktning (standardinställningen). I så fall vill du lägga till "bakgrundsposition" -egenskapen till din CSS-regel:

kropp {
bakgrund-bild: url ("image.gif");
bakgrundsposition: center-top;
}

När du definierar egenskapen "bakgrundsposition" anger det första värdet den horisontella inriktningen (vänster, mitten eller höger) och den andra ställer in bildens vertikala inriktning (övre, mitten eller botten).

Därefter bestämmer du att du vill stoppa bilden från att luta (upprepa sig) horisontellt, även om du vill att den ska kaklas lodrätt. Det är dags att ta fram egenskapen "bakgrund-upprepning":

kropp {
bakgrund-bild: url ("image.gif");
bakgrundsposition: center-top;
bakgrund-upprepa: upprepa-y;
}

Om du ställer in värdet till "upprepa-y" säger webbläsaren att kakel bakgrundsbilden längs y-axeln, alias vertikalt, men inte x-axeln (horisontellt), vilket är exakt vad vi ville ha. Om du ville kakla det horisontellt men inte vertikalt skulle du använda 'repetera-x'-värdet istället; om du inte vill att bilden ska kakel alls, ge den värdet "ingen upprepa". Standardvärdet är att kakel bilden både horisontellt och vertikalt, så om det är det bästa valet för din bild behöver du inte ställa in "bakgrund-upprepning" -egenskapen alls.

Slutligen kan du titta på egenskapen "bakgrund-bilaga". Som standard rullar din bild när sidan rullar, så om du inte upprepar bilden vertikalt och du har en lång sida kommer din bild inte att sträcka sig längst ner på sidan. Du kan ändra detta genom att ställa in egenskapen 'bakgrundsbilagning' till 'fast', vilket gör att bakgrundsbilden förblir på samma plats på skärmen oavsett hur sidan rullar. Nu kommer dina bakgrundsbilder att se ut så här:

kropp {
bakgrund-bild: url ("image.gif");
bakgrundsposition: center-top;
bakgrund-upprepa: upprepa-y;
bakgrundsfästning: fast;
}


Om du vill hålla dina CSS-regler så små som möjligt kan du kombinera alla dina bakgrundsvärden till en rad genom att använda egenskapen "bakgrund", så här:

bakgrund {
url ("image.gif") upprepa-y fixerad center-topp;
}

När du använder egenskapen "bakgrund" måste du lista värdena i en specifik ordning:
[bakgrundsfärg (om den används)] [bakgrundsbild] [bakgrundsupprepning] [bakgrundsfästning] [bakgrundsposition]. Du kan lämna ut alla värden som du inte behöver, du behöver bara lista alla värden som du använder i rätt ordning eller så fungerar inte regeln.

Video Instruktioner: Hur Man Animerar Sin Bakgrundsbild! (Maj 2024).