La possibilitat d'estirar la imatge de fons a tota l'amplada de la finestra del navegador mitjançant CSS només va aparèixer amb la publicació de la seva última especificació: CSS3. Malauradament, fins ara un gran nombre de internautes utilitzen navegadors antics que no entenen l’especificació CSS3. Per tant, heu de triar: utilitzeu una solució menys convenient, però amb diversos navegadors, o bé d’alta tecnologia, però per a un públic limitat. Considerem les dues opcions.
Necessari
Coneixements bàsics d'HTML i CSS
Instruccions
Pas 1
La primera opció es basa en especificacions anteriors del llenguatge CSS. Heu de crear una estructura de codi HTML que tingui dues capes superposades, una sobre l'altra. Les capes (div) es poden estirar fins a l'amplada de la pantalla a l'antiga especificació d'idioma de descripció d'estil en cascada. A la part inferior de les capes, heu de col·locar la imatge de fons i, a la part superior, col·locareu tot el contingut de la pàgina. Aquesta estructura del cos del document pot tenir aquest aspecte:
Aquest serà el contingut de la pàgina
I la descripció dels estils d’aquesta estructura s’ha de col·locar a la part de l’encapçalament. Per exemple, això:
html, body {
marge: 0px;
alçada: 100%;
}
# fons {
posició: absoluta;
amplada: 100%;
alçada: 100%;
}
#body {
posició: absoluta;
amplada: 100%;
alçada: 100%;
índex z: 2;
}
Aquí les capes amb fons d'identificadors (aquesta és la vostra imatge de fons) i el cos (aquesta és la capa del contingut de la pàgina) s'estableixen en un posicionament absolut i un 100% d'amplada i alçada. A més, a la capa de contingut se li assigna un número de sèrie índex z = 2. Determina la "profunditat" de les capes; com més gran sigui, més lluny del "fons" es troba aquesta capa. En el nostre cas, estarà per sobre de la capa de fons, que utilitza l’índex z per defecte.
Pas 2
El codi complet pot tenir aquest aspecte:
html, body {
marge: 0px;
alçada: 100%;
}
# fons {
posició: absoluta;
amplada: 100%;
alçada: 100%;
}
#body {
posició: absoluta;
amplada: 100%;
alçada: 100%;
índex z: 2;
}
Aquest serà el contingut de la pàgina
No oblideu substituir el nom del fitxer de la imatge de fons fon.png.
Pas 3
La segona opció utilitzarà la propietat de mida de fons introduïda a CSS3. Al mateix temps, afegiu propietats similars a les definicions d'estil que anteriorment feien servir els navegadors Mozilla Firefox, Google Chrome i Opera. El bloc de descripció d'estil d'aquesta versió pot tenir aquest aspecte:
html {
fons: url (fon.png) centre central sense repetició fix;
-webkit-background-size: portada;
-moz-background-size: portada;
-o-background-size: portada;
mida de fons: portada;
}
I aquí no us oblideu de substituir el nom del fitxer de la imatge de fons fon.png. I en el cos del document, no es requereixen construccions especials en aquesta versió.
