Effetti sullo sfondo di una pagina Web con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

In Html il problema che sorge utilizzando file di sfondo è che il file immagine, Gif o Jpg che sia, si ripete sullo sfondo della pagina senza lasciare allo sviluppatore la possibilità di decidere di utilizzare un file che occupi, ad esempio, solo il lato superiore destro dello sfondo.

Una pessima sia pur efficace tecnica adottata è quella di creare un file grande quanto tutto lo schermo, in modo da ripetersi per forza di cose una sola volta, lascio quindi immaginare i tempi di caricamento dei file...

L'unica cosa che è possibile fare con l'Html è quella di utilizzare il Tag bgproperties passandogli il valore fixed, anche se in questo modo utilizziamo un'estensione dell'Html che si iniza ad orientare verso i Css, vediamo un esempio:

<body background="immagine.gif" bgproperties="fixed">
L'utilizzo di questo Tag serve ad evitare che l'immagine scrolli insieme al contenuto della pagina lì dove si necessita delle barre di scorrimento, ma con i Css si può fare qualcosa di più, immaginiamo di voler creare una pagina Web che utilizzi il metodo appena proposto ed in più permetta di non far ripetere l'immagine per tutta la pagina, utilizzeremo allora l'attributo style per implementare questo meccanismo,vediamo come:
<body background="immagine.gif" bgproperties="fixed" style="background-repeat: No-repeat;">
Abbiamo poi la possibilità di decidere di far ripetere lo sfondo solo in orizzontale o in verticale, seguendo la teoria degli assi cartesiani:
<body background="immagine.gif" bgproperties="fixed" style="background-repeat: repeat-Y;">
In questo caso l'immagine si ripeterà in verticale, per farla ripetere in orizzontale occorrerà utilizzare il valore repeat-X.

Un corretto utilizzo di queste tecniche, delle tabelle Html, degli altri elementi Css ed una buona dose di fantasia, possono portare a risultati sorprendenti!

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.936)

:: Referenze dei fogli di stile Css (41.900)

:: Menu ad effetto mouseover con i Css (39.299)

:: Effetti sui link con i Css (30.301)

:: Testo verticale coi Css (20.102)

:: Angoli smussati in un box coi Css (18.979)

:: Box con effetto ombra con i CSS3 (16.391)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.291)

:: Stilizzare i form Html con i Css (16.110)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.893)

IN EVIDENZA
DOWNLOAD