100% Baggrundsbillede med CSS3
Det er efterhånden blevet meget normalt at ignorere internettets standarder når det kommer til webdesigns, hvilket jeg selv er stor tilhænger af. Regler er til for at skulle brydes og hvorfor skal der sidde nogle kloge hoveder og bestemme hvordan min hjemmeside skal designes? Når alt kommer til alt, så handler det om at give brugeren den bedste oplevelse overhovedet, uanset hvordan din kildekode ser ud.
Det er derfor blevet meget populært at bruge så meget plads vi kan få ud af vores browser, og specielt nu hvor mobil browsing bliver en større del af vores hverdag.
Et godt eksempel på det at udnytte al den plads vi kan i vores browser er at ligge et baggrundsbillede ind på vores hjemmeside, og lade det fylde det hele ud. Den måde man ville gøre det på med CSS2 er følgende:
body{
background: #000 url(background.jpg) center top fixed no-repeat;
}
Man ville så lave background.jpg stor nok til at passe til de mest benyttede opløsninger, plus lidt ekstra for at være sikker. Jeg kan næsten garantere at eksemplet ikke vil udfylde hele din skærm, men det var netop det man håbede på det ville gøre dengang det her var den eneste løsning udover nogle irriterende javascript hacks direkte på img tagget.
Det er i dag ikke den bedste løsning da vi i højere grad ser større og større opløsninger, mobiler og tablets som alle har vidt forskellige opløsninger, og hvis vi skal lave større og større billeder, så kommer det til sidst til at gå udover performance på vores side da billedet kommer til at fylde så meget at det vil tage lidt ekstra tid at loade.
Men hvordan får vi så genskabt denne effekt således at det kommer til at passe til alle opløsninger og uden vi behøver at gå på kompromis med load tiderne? Det er faktisk ret simpelt. Med CSS3 på banen er mange ting blevet nemmere og smartere, og det gælder også dette eksempel. Ved at sætter background-size til cover, vil CSS automatisk udfylde vores browser med vores valgte baggrundsbillede.
body{
background: #000 url(background.jpg) center top fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Vi bruger i øvrigt -webkit- og -moz- som er prefixes til Firefox og Google Chrome browsers, således vi får samme effekt i alle browsers.
Som man kan se, så er billedet det samme, men vi får simpelthen CSS til at strække billedet til at udfylde hele browservinduet, og dermed har vi opnået den ønskede effekt uden brug af javascript, eller alt for store billeder.