Content
Doneu-li interès visual al vostre lloc web amb gràfics de fons
revisat per
Ara, feu un cop d'ull al CSS. No és gaire diferent del codi anterior. Hi ha alguns complements per fer-ho més clar.
Ara, aquest és el resultat a pantalla completa.
Per configuració fons de mida a coberta, garantireu que els navegadors escalaran automàticament la imatge de fons, per molt gran que sigui, per cobrir tota l’àrea de l’element HTML a què s’està aplicant. Mireu una finestra més estreta.
Segons caniuse.com, aquest és suportat per més del noranta per cent dels navegadors, cosa que la converteix en una elecció òbvia en la majoria de les situacions. Crea alguns problemes amb els navegadors de Microsoft, de manera que podria ser necessari un fallat.
La manera de fallback
A continuació, es mostra un exemple que utilitza una imatge de fons per al cos d’una pàgina i que defineix la mida 100% de manera que sempre s’estendrà per adaptar-se a la pantalla. Aquest mètode no és perfecte, i pot provocar una mica d'espai descobert, però amb l'ús de posició de fons , hauríeu de poder eliminar el problema i allotjar-vos encara en navegadors antics.
cos {
fons: url ('bgimage.webp');
fons-repetir: no-repetir;
fons de mida: 100%;
antecedent-posició: centre;
}
Utilitzant l’exemple de dalt amb el fons de mida ajustat a 100% en canvi, podeu veure que el CSS té la major part del mateix.
El resultat en un navegador de pantalla completa o en un de dimensions similars a la de la imatge és gairebé idèntic. Tot i això, amb una pantalla més estreta, els defectes comencen a aparèixer.
Per descomptat, no és ideal, però funcionarà com a fallback.
Segons caniuse.com, aquesta propietat funciona a IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ i a tots els navegadors mòbils principals. Això cobreix tots els navegadors moderns disponibles avui dia, cosa que significa que heu d'utilitzar aquesta propietat sense por que no funcioni a la pantalla d'algú.
Entre aquests dos mètodes, no hauríeu de tenir cap dificultat per suportar gairebé tots els navegadors. Com background-size: cover obté una acceptació encara més gran entre els navegadors, fins i tot aquest error serà innecessari. Clarament, CSS3 i pràctiques de disseny més sensibles s’han simplificat i racionalitzat utilitzant imatges com a fons adaptatius dins d’elements HTML.
