gestire background di sfondo con i CSS

Webdesignerwall è sempre ricco di risorse interessanti. Questo breve tutorial illustra come gestire al meglio ampi background nei propri layout con i CSS(proprio come quello dell’autore del blog). Il tutorial è indicato per gli utenti alle prime armi: la chiarezza espositiva e le numerose immagini facilitano enormemente l’apprendimento di questa tecnica.

La ripropongo bremente qui di seguito (per approfondimenti rimando al tutorial originale):

Quando si utilizzano ampi background di sfondo si può cadere nell’errore di oggimizzare il background (non ripetibile) per una larghezza massima di 1280. Se qualche anno fa questa risoluzione erra sufficiente ad accontentare la totalità degli utenti oggi con l’ampiezza dei monitor sempre crescente tale risoluzione non basta più.

Qui l’autore fa un esempio

Background a immagine singola

Una prima soluzione (la più semplice) consiste nel creare un immagine che degradi nel colore dello fondo. In questo modo superata una determinata larghezza l’immagine sfumerà elegantemente in un tono neutro.

L’esempio dell’autore vale più di mille parole

Lo stile necessario per gestire questa prima solzione è minimo:

[css]
body {
padding: 0;
margin: 0;
background: #f8f7e5 url(immagine_di_sfondo.jpg) no-repeat center top;
width: 100%;
display: table;
}
[/css]

A quanto pare width:100% e display:table servono a prevenire un difetto ri rendering su firefox.

Background a doppia immagine

In questo caso viene utilizzato un pattern riptetuto per il body mentre il div principale utilizzerà come background una gif trasparente che ha il bordo di un colore molto simile a quello adoperato per pattern (ovviamente il colore di background del div dovrà essere transparent). A tale proposito si consiglia di non adoperare pattern con colori troppo contrastati.

Cielo in Background

Simile all’esempio precedente. In questo caso lo fondo del body sarà ripetuto esclusivamente sull’asse delle x con il colore di sfondo del body identico a quello della parte bassa del background. La parte centrale con le nuvole sarà a carico del div principale che la posizionerà al centro come nell’esempio precedente (e non sarà trasparente ma riprenderà il medesimo pattern del body)