Bruke CSS til å angi et bakgrunnsbilde

• Kan 4, 2024

Noen gang lurt på hvordan nettsteder administrerer de pene designene og bildene som flyter bak teksten? Det hele gjøres gjennom magien med Cascading Style Sheets. CSS lar deg ikke bare utpeke et bilde på siden din, den lar deg også finjustere hvordan bildet vises - slik at du kan få akkurat det utseendet du ønsker.

Den grunnleggende byggesteinen for bakgrunnsbildet ditt er passende nok "bakgrunnsbilde" -egenskapen. Du bruker denne egenskapen til å fortelle nettstedet ditt hvor bildefilen ligger, som følger:

kropp {
bakgrunnsbilde: url ("image.gif");
}

Det er alt du trenger å gjøre for å plassere et bakgrunnsbilde på websiden din. Selvfølgelig vil du sannsynligvis ønske å tilpasse hvordan bildet vises. La oss si at du vil at bildet ditt skal starte øverst på siden, men at det skal sentreres horisontalt i stedet for venstrejustert (standardinnstillingen). I så fall vil du legge til "bakgrunnsposisjon" -egenskapen til CSS-regelen din:

kropp {
bakgrunnsbilde: url ("image.gif");
bakgrunnsposisjon: midtopp;
}

Når du definerer egenskapen 'bakgrunnsposisjon', setter den første verdien den horisontale justeringen (venstre, sentrum eller høyre), og den andre angir bildets vertikale justering (topp, sentrum eller bunn).

Deretter bestemmer du at du vil stoppe bildet fra å flislegge (gjenta seg) horisontalt, selv om du ønsker at det skal flislegges loddrett. Det er på tide å få frem "bakgrunn-gjenta" -egenskapen:

kropp {
bakgrunnsbilde: url ("image.gif");
bakgrunnsposisjon: midtopp;
bakgrunn-gjenta: gjenta-y;
}

Hvis du setter verdien til "gjenta-y", leser nettleseren å flise bakgrunnsbildet langs y-aksen, også loddrett, men ikke x-aksen (horisontalt), som er akkurat det vi ønsket. Hvis du ville flislegge den horisontalt, men ikke vertikalt, ville du bruke 'gjenta-x'-verdien i stedet; Hvis du ikke ønsker at bildet skal flislegges i det hele tatt, gi det verdien som ikke gjentas. Standardverdien er å flislegge bildet både horisontalt og vertikalt, så hvis det er det beste valget for bildet ditt, trenger du ikke angi egenskapen 'bakgrunn-gjenta' i det hele tatt.

Til slutt kan du ta en titt på egenskapen 'bakgrunnsvedlegg'. Som standard ruller bildet ditt mens siden ruller, så hvis du ikke gjentar bildet vertikalt og har en lang side, vil bildet ikke strekke seg til bunnen av siden. Du kan endre dette ved å sette egenskapen 'bakgrunnsvedlegg' til 'fast', noe som får bakgrunnsbildet til å holde seg på samme sted på skjermen uavhengig av hvordan siden ruller. Nå vil bakgrunnsreglene dine se slik ut:

kropp {
bakgrunnsbilde: url ("image.gif");
bakgrunnsposisjon: midtopp;
bakgrunn-gjenta: gjenta-y;
bakgrunnsvedlegg: fast;
}


Hvis du vil holde CSS-reglene så små som mulig, kan du kombinere alle bakgrunnsverdiene dine i en linje ved å bruke "bakgrunnsegenskapen", slik:

bakgrunn {
url ("image.gif") repetisjon-y fast senter topp;
}

Når du bruker "bakgrunn" -egenskapen, må du liste verdiene i en bestemt rekkefølge:
[bakgrunn-farge (hvis brukt)] [bakgrunn-bilde] [bakgrunn-gjenta] [bakgrunn-vedlegg] [bakgrunn-plassering]. Du kan utelate enhver verdi du ikke trenger, du trenger bare å oppgi verdier du bruker i riktig rekkefølge, ellers vil ikke regelen fungere.

Video Instruksjoner: How to use gradient background in html and css (Kan 2024).