INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Effetti sullo sfondo di una pagina Web con i Css

Autore: Luca Ruggiero | Tell a Friend

Corso HTML
Impara il linguaggio di marcatura per il Web.

Corso CSS
Web Design ed Accessibilità secondo il W3C!

Corso Web Design
Disegno di siti Web con HTML, CSS e Dynamic HTML.

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!

IN EVIDENZA
Una slidegallery con jQuery Pagamenti online con PayPal e PHP Breve guida a jQuery Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript
HOT LINKS
Servizi per Webmaster E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb