Når jeg går i gang med at lave en hjemmeside, er det nødvendigt at lave forskellige layouts til forskellige størrelser skærme - dette er en del af begrebet 'responsivt layout'. Er der fotos eller grafik - herefter kaldet "billeder" for nemheds skyld - på hjemmesiden, skal de kunne ændre størrelse afhængigt af skærmstørrelsen på den enhed der viser hjemmesiden.

Metoden hvorpå et billede skaleres, afhænger delvist af hvilken sammenhæng billedet optræder i – fungerer det som en baggrund for sidens indhold, vil jeg oftest foretrække en CCS3-baseret løsning, og er billedet en del af sidens indhold for eksempel indsat mellem to tekstafsnit, vil jeg bruge skalering ved hjælp af CSS2.

Læs mere om billedskalering når billedet er en del af sidens indhold, og læs detaljeret om billedstørrelsens betydning, aspect ratio og loadtime i forhold til antal billeder i artiklerne herunder:

Ingen af de her på siden omtalte løsninger fungerer optimalt på alle skærmstørrelser, hvis forholdet mellem baggrundsbilledets 'aspect ratio' skal bevares. Ligegyldigt om jeg bruger 'cover' eller 'contain', vil der enten blive zoomet ind i billedet eller skåret i top og bund eller sider. Læs mere om 'aspect ratio' i artiklen Introduktion til billeder

Så når jeg vil bruge et baggrundsbillede på hjemmesiden, er det fornuftigt at tænke over hvad billedet forestiller - er det et kunsterisk billede bestående af farver og former, er det lettere at skalere, da det ikke er lige så nødvendigt at bevare 'aspect ratio'.

Er der modsat mennesker, dyr eller tekst på billedet, er det langt sværere at "strække" billedet uden at det begynder at se nærkeligt ud.

Har jeg først besluttet mig for at bagrundsbilledet SKAL bevare aspect ratio, er det nødvendigt at vælge, hvilken af CSS3-løsningerne 'contain' eller 'cover' der passer bedst i det aktuelle layout - test løsningen, og beskær derefter eventuelt billedet i et billedbehandlings-program for at få det bedste resultat.

'contain' minder i måden at skalere billeder på, om CSS2-løsningen for billeder som indhold på hjemmesiden som beskrevet i artiklen skalering af billeder - bliver skærmstørrelsen for smal eller lav til at rummme billedet, vil der i top og bund eller i siderne være tomme områder som ikke dækkes af billedet:

'cover' er fuldt dækkende i alle 4 sider af billedet - bliver skærmstørrelsen for smal eller lav til at rumme billedet, zoomes der ind i billedet, således at de yderste områder ikke ses - læg mærke til hvordan figurernes fødder er væk:

Ældre browsere som Internet Explorer 8 (IE8) understøtter ikke brugen af CSS3, så bruger jeg CSS3's 'background-size' til skalering af et baggrundsbillede, bør en alternativ løsning (et 'fallback') overvejes - ifølge fdim.dk er IE8 i december 2013 stadig er den 8. mest benyttede browser i Danmark.

Der er flere muligheder at vælge imellem:

Sidstnævnte løsning fra CSS-tricks opfører sig i IE8 stort set ligesom 'cover', er baseret på CSS2 og kræver ikke javascript.

Jeg bruger en conditional comment til at målrette løsningen versioner af IE som er enten 8 eller lavere:

HTML

<div class="IE_bg"> <!-- FALLBACK TIL IE8 OG ÆLDRE -->
    <img src="../images/bg-image.jpg" > 
</div>

CSS

body  {
    background: url(images/bg-image.jpg);
    background-repeat: no-repeat;
    background-position: center; /* cover: BRUGER MIDTEN SOM PUNKT FOR ZOOM */
    background-size: cover; /* SKALERER - ZOOMER IND I FOTO NÅR VIEWPORT BLIR FOR LILLE  */    
    background-color: #999; /* VÆLG FARVE DER MATCHER BILLEDE PGA "FLASH" UNDER LOAD */
}
.IE_bg  {
    display: none; /* SKJUL IE_bg I ALLE BROWSERE */
}
</style>

<!--[if lte IE 8 ]>
<style type="text/css">
body  {
    background: url(#); /* NULSTIL URL: 'background-size:cover' - url(../demos/images/bg-image.jpg); */
}
.IE_bg {
    display: block; /* VIS IE_bg I IE8 "> */
    z-index: -100; /* BRUG  z-index TIL AT PLACERE img UNDER SIDENS INDHOLD */   
    position: fixed; /* FASTHOLDER IE_bg i VIEWPORT TRODS SCROLL */   
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;
}
.IE_bg img {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%;
    min-height: 50%;
    -ms-interpolation-mode: bicubic; /* GIVER BEDRE OPLØSNING I IE7 */
}
</style>
<![endif]-->

Se demo'en her som viser løsningen - den burde fungere i alle browsere og ikke kun IE8:

Som med skalering af baggrundsbilleder kræver det også et fallback til IE8 at bruge CSS3 til skalering af billeder indsat i sidens indhold, så den simpleste løsning er at bruge CSS2 som beskrevet i artiklen Skalering af billeder i et respomsivt layout.

Vil jeg bruge 'background-size' til skalering af almindelige billeder, skal billedet enten oprettes som en 'class' eller hentes direkte i elementet ved hjælp af property 'background-image'. Det er nødvendigt at angive både 'width' og 'height' i procent - her et eksempel hvor billedet hentes ind i div'en 'box' i en 50% størrelse af det omgivende element:

HTML

<div id="img_cover"> <!-- HER VISES BILLEDET --></div>

CSS

#img_cover  {
    width: 50%; /* ANGIVELSE AF width I % NØDVENDIG FOR SKALERINGEN */
    height: 50%; /* ANGIVELSE AF height I % NØDVENDIG FOR SKALERINGEN */
    margin: 0 auto;
    background-image: url(images/bg-image.jpg);
    background-repeat: no-repeat;
    background-position: center; /* cover: BRUGER MIDTEN SOM PUNKT FOR ZOOM */
    background-size: cover; /* SKALERER OG ZOOMER IND I FOTO NÅR VIEWPORT BLIR FOR LILLE  */   
/*  background-color: #666; */
}