Com estirar una imatge de fons per ajustar una pàgina web

Doneu al vostre lloc un interès visual amb gràfics de fons

Les imatges són una part important dels atractius dissenys de llocs web. Això inclou l'ús d'imatges de fons. Aquestes són les imatges i els gràfics que s'utilitzen darrere d' àrees d'una pàgina a diferència d'imatges que es presenten com a part de les pàgines de contingut. Aquestes imatges de fons poden afegir interessos visuals a una pàgina i ajudar-vos a aconseguir el disseny visual que podeu cercar en una pàgina.

Si comença a treballar amb imatges de fons, sens dubte, es trobarà amb l'escenari en què voleu estirar una imatge per adaptar-se a la pàgina.

Això és especialment cert per als llocs web responsables que s'estan lliurant a una àmplia gamma de dispositius i mides de pantalla .

Aquesta voluntat d'estirar una imatge de fons és un desig molt habitual per als dissenyadors web perquè no totes les imatges s'adapten a l'espai d'un lloc web. En lloc d'establir una mida fixa, estirar la imatge permet que es flexioni per adaptar-se a la pàgina, independentment de l'ample o estret de la finestra del navegador .

La millor manera d'estirar una imatge per ajustar-se al fons d'una pàgina és utilitzar la propietat CSS3 , per a la mida del fons. Aquí teniu un exemple que utilitza una imatge de fons per al cos d'una pàgina i que estableix la mida fins al 100%, de manera que sempre s'estengui per adaptar-se a la pantalla.

cos {
background: url (bgimage.jpg) no-repeat;
mida del fons: 100%;
}

Segons caniuse.com, aquesta propietat funciona en IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, i en tots els principals navegadors mòbils. Això us cobrirà tots els navegadors moderns disponibles avui, cosa que significa que heu d'utilitzar aquesta propietat sense por a que no funcioni a la pantalla d'algú.

Falsificació d'un fons estirat en navegadors antics

És molt poc probable que necessiteu suportar navegadors anteriors a IE9, però suposem que us preocupa que l'IE8 no sigui compatible amb aquesta propietat. En aquest cas, podeu falsificar un fons estès. I podeu utilitzar els prefixos del navegador per a Firefox 3.6 (-moz-background-size) i Opera 10.0 (-o-background-size).

La forma més senzilla de falsificar una imatge de fons estesa és estirar-la per tota la pàgina. A continuació, no acabeu amb espai addicional ni us heu de preocupar perquè el vostre text s'adapti a l'àrea estesa. A continuació s'explica com fer-ho:

id = "bg" />

1. Primer, assegureu-vos que tots els navegadors tinguin una alçada del 100%, 0 marges i 0 farcit als elements HTML i BODY. Situeu el següent al capdavant del vostre document HTML:

2. Afegiu la imatge que vulgueu que sigui el fons com a primer element de la pàgina web i doneu-li l' id de "bg":

3. Col·loqueu la imatge de fons perquè s'hagi fixat a la part superior i a l'esquerra i sigui 100% d'ample i 100% d'alçada. Afegiu això al vostre full d'estils:

   img # bg {
   posició: fixa;
   top: 0;
   esquerra: 0;
   ample: 100%;
   alçada: 100%;
   }

4. Afegiu tot el vostre contingut a la pàgina dins d'un element DIV amb un identificador de "contingut". Afegiu el DIV a sota de la imatge:

   Tot el contingut aquí, inclosos els encapçalaments, els paràgrafs, etc.

   Nota: ara és interessant mirar la vostra pàgina. La imatge hauria de mostrar-se estirat, però el vostre contingut no es troba complet. Per què? Com que la imatge de fons és del 100% d'alçada, i la divisió de contingut és després de la imatge en el flux del document, la majoria dels navegadors no la mostraran.
   
5. Col·loqueu el vostre contingut de manera que sigui relatiu i tingui un índex z de 1. Això el portarà per sobre de la imatge de fons en els navegadors que compleixin els estàndards. Afegiu això al vostre full d'estils:

   #contingut {
   posició: relativa;
   z-index: 1;
   }

1. Però no estàs acabat. Internet Explorer 6 no compleix els estàndards i encara té alguns problemes. Hi ha moltes maneres d'ocultar el CSS de tots els navegadors, però IE6, però el més fàcil (i menys probable que provoqui altres problemes) és utilitzar comentaris condicionals. Feu el següent després del full d'estils al capdavant del document:

2. A l'interior del comentari ressaltat, afegiu un altre full d'estils amb alguns estils per aconseguir que l'IE 6 es reprodueixi bé:

3. Assegureu-vos de provar també a IE 7 i IE 8. És possible que necessiteu ajustar els comentaris per donar-los suport també. No obstant això, va funcionar quan ho vaig provar.

D'acord: és veritat que aquesta és una OFERTA. Molt pocs llocs han de suportar IE 7 o 8 més, i molt menys IE6!

Com a tal, aquest enfocament està antiquat i probablement innecessari per a vostè. Ho deixo aquí més com un model de curiositat quant a les coses més difícils abans que tots els nostres navegadors jugessin tan bé junts!

Falsificació d'una imatge de fons estirat sobre un espai més petit

Podeu utilitzar una tècnica similar per falsificar una imatge de fons estesa a través d'un DIV o un altre element a la vostra pàgina web. Això és una mica més complicat, ja que heu de fer servir el posicionament absolut o tenir problemes d'espaiat estranys per a altres parts de la vostra pàgina.

1. Col·loqueu la imatge a la pàgina que vull utilitzar com a fons.

2. Al full d'estils, estableixi un ample i un alt per a la imatge. Tingueu en compte que podeu utilitzar percentatges d'amplada o alçada, però em sembla més fàcil d'ajustar amb els valors de longitud de l'alçada.

   img # bg {
   ample: 20em;
   alçada: 30em;
   }

3. Col·loqueu el contingut en una div amb el "contingut" d'identitat tal com vam fer a dalt:

   Tot el contingut aquí

4. Estil el contingut div per tenir el mateix ample i alçada que la imatge de fons:

   div # content {
   ample: 20em;
   alçada: 30em;
   }

5. A continuació, col·loqueu el contingut fins a la mateixa alçada que la imatge. Per tant, si la vostra imatge és de 30 anys, tindreu un estil superior: -30em; No oblideu posar un índex z d'1 sobre el contingut.

   #contingut {
   posició: relativa;
   top: -30em;
   z-index: 1;
   ample: 20em;
   alçada: 30em;
   }

6. A continuació, afegiu un índex z de -1 per als usuaris de l'IE 6, com ho heu fet més amunt:

De nou, amb una mida de fons que gaudeix del gran suport del navegador que fa ara, aquest enfocament també és molt probable que no sigui necessari i es presentés com a producte d'una època passada. Si voleu utilitzar aquest enfocament, assegureu-vos de provar-ho en tants navegadors com vulgueu.

I si el vostre contingut canvia de mida, haureu de canviar la mida del contenidor i la imatge de fons, en cas contrari, acabareu amb resultats estranys.