Heldekkende skalerbart bakgrunnsbilde med CSS3 background-size

På Dreamweaver-kurs for en tid tilbake fikk jeg spørsmål om hvordan man kan bruke et stort bakgrunnsbilde som skalerer når størrelsen på vinduet i nettleseren skaleres.

En måte å gjøre dette på, og sannsynligvis den enkleste, er å bruke CSS3, nærmere bestemt egenskapen background-size.

html {
background: url(bakgrunn.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Dette gir deg et heldekkende bakgrunnsbilde som skalerer når vinduet i nettleseren endrer størrelse.

Del denne artikkelen:

Kommentarer

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *