Bruk CSS3 til å tegne et bakgrunnsbilde som passer til en webside

Bilder er en viktig del av attraktive webdesign. Dette inkluderer bruken av bakgrunnsbilder. Dette er bildene og grafikken som brukes bak områder av en side i motsetning til bilder som presenteres som en del av innholdssidene. Disse bakgrunnsbildene kan legge til visuell interesse for en side og hjelpe deg med å oppnå det visuelle designet du kan se etter på en side.

Hvis du begynner å jobbe med bakgrunnsbilder, vil du uten tvil komme inn i scenariet der du vil at et bilde skal strekke for å passe på siden. Dette gjelder spesielt for responsive nettsteder som leveres til et bredt spekter av enheter og skjermstørrelser.

Dette ønske om å strekke et bakgrunnsbilde er et svært vanlig ønske for webdesignere fordi ikke alle bilder passer inn i et nettsted. I stedet for å sette en fast størrelse, strekker bildet til å bøye seg for å passe på siden, uansett hvorvidt det er bred eller smal i nettleservinduet.

Den beste måten å strekke et bilde på for å passe til en side er å bruke CSS3-egenskapen, for bakgrunnsstørrelse. Her er et eksempel som bruker et bakgrunnsbilde for en sides kropp, og som setter størrelsen til 100% slik at den alltid strekker seg for å passe til skjermen.

kropp { bakgrunn: url (bgimage.jpg) no-repeat; bakgrunnsstørrelse: 100%; }

Ifølge caniuse.com fungerer denne egenskapen i IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ og på alle de store mobile nettleserne. Dette dekker deg for alle de moderne nettleserne som er tilgjengelige i dag, noe som betyr at du bør bruke denne eiendommen uten frykt for at den ikke vil fungere på en persons skjerm.

Faking en strukket bakgrunn i eldre nettlesere

Det er svært lite sannsynlig at du trenger å støtte alle nettlesere eldre enn IE9, men la oss anta at du er bekymret for at IE8 ikke støtter denne egenskapen. I det tilfellet kan du falle en strukket bakgrunn. Og du kan bruke nettleserprefiksene for Firefox 3.6 (-moz-background-size) og Opera 10.0 (-o-background-size).

Den enkleste måten å fake et strukket bakgrunnsbilde er å strekke det over hele siden. Da kommer du ikke opp med ekstra plass eller trenger å bekymre deg for at teksten passer i det strakte området. Slik gjør du det:

id = "bg" />

1. Først må du kontrollere at alle nettlesere har en 100% høyde, 0 marginer og 0 polstring på ogHTML KROPP elementer. Plasser følgende i hodet til HTML-dokumentet ditt:
2. Legg til bildet du vil være bakgrunnen som det første elementet på nettsiden, og gi det id av "bg":
3. Plasser bakgrunnsbildet slik at det er festet øverst og venstre og 100% bredt og 100% i høyden. Legg dette til stilarket ditt:
   1. img # bg {
   3. posisjon: fast;
   5. topp: 0;
   7. venstre: 0;
   9. bredde: 100%;
   11. høyde: 100%;
   13. }
4. Legg alt innhold til siden inne i en DIV element med en id av "innhold". Legg til DIV under bildet:Alt innholdet ditt her - inkludert overskrifter, avsnitt, etc.
   1. Merk: Det er interessant å se på siden din nå. Bildet skal vises utstrakt, men innholdet ditt mangler helt. Hvorfor? Fordi bakgrunnsbildet er 100% i høyden, og innholdsdelingen er etter bildet i dokumentets strømning - de fleste nettlesere vil ikke vise det.
5. Plasser innholdet ditt slik at det er relativt og har a z-indeks av 1. Dette vil bringe det over bakgrunnsbildet i standard-kompatible nettlesere. Legg dette til stilarket ditt:
   1. #innhold {
   3. stilling: relativ;
   5. z-indeks: 1;
   7. }
6. Men du er ikke ferdig. Internet Explorer 6 er ikke standardkompatibel og har fortsatt noen problemer. Det er mange måter å skjule CSS fra hver nettleser, men IE6, men det enkleste (og minst sannsynlig å forårsake andre problemer) er å bruke betingede kommentarer. Sett følgende etter stilarket i hodet på dokumentet ditt:
7. Inne i den uthevede kommentaren, legg til et annet stilark med noen stilarter for å få IE 6 til å spille fint:
8. Pass på å teste i IE 7 og IE 8 også. Du må kanskje justere kommentarene for å støtte dem også. Det fungerte imidlertid da jeg testet det.

OK - dette er admittedly WAY overkill. Svært få steder må støtte IE 7 eller 8 lenger, mye mindre IE6! Som sådan er denne tilnærmingen antatt og sannsynligvis unødvendig for deg. Jeg la det her mer som en modell av nysgjerrighet om hvor mye vanskeligere ting var før alle våre nettlesere spilte så pent sammen!

Faking et strukket bakgrunnsbilde over en mindre plass

Du kan bruke en lignende teknikk til å feire et strukket bakgrunnsbilde over en DIV eller et annet element på websiden din. Dette er litt vanskeligere, siden du må enten bruke absolutt posisjonering eller ha merkelige mellomromproblemer for andre deler av siden din.

1. Legg bildet på siden som jeg vil bruke som bakgrunn.
2. I stilarket angir du bredde og høyde for bildet. Merk, du kan bruke prosenter for bredde eller høyde, men jeg synes det er lettere å justere med lengdeverdier for høyden.
   1. img # bg {
   3. bredde: 20em;
   5. høyde: 30em;
   7. }
3. Plasser innholdet ditt i en div med id "innhold" som vi gjorde over:Alt innholdet ditt her
4. Stil innholdsdiv for å ha samme bredde og høyde som bakgrunnsbildet:
   1. div # innhold {
   3. bredde: 20em;
   5. høyde: 30em;
   7. }
5. Sett deretter innholdet opp til samme høyde som bildet.Så hvis bildet ditt er 30em, ville du ha en toppstil: -30em; Ikke glem å sette en z-indeks på 1 på innholdet.
   1. #innhold {
   3. stilling: relativ;
   5. topp: -30em;
   7. z-indeks: 1;
   9. bredde: 20em;
   11. høyde: 30em;
   13. }
6. Legg deretter til en z-indeks på -1 for IE 6 brukere, som du gjorde ovenfor:

Igjen, med bakgrunnsstørrelse som nyter den brede nettleserstøtten det gjør nå, er denne tilnærmingen også meget sannsynlig unødvendig og presenteres som et produkt av en svunnen tid. Hvis du vil bruke denne tilnærmingen, bare vær sikker på å teste dette i så mange nettlesere som mulig. Og hvis innholdet ditt endrer størrelse, må du endre størrelsen på beholderen og bakgrunnsbildet ditt, ellers vil du ende opp med merkelige resultater.