Il sito per imparare gratuitamente a fare pagine Web

JavaScript E10
















E10 - Immagine di sfondo che si adatta a qualsiasi risoluzione video.


Funziona con il Browser:  Firefox firefox   Safari Safari   Opera opera   IE internet explorer   Chr Chrome

Crediti:
Name: D.J.Oepkes
E-mail: joepkes@qcssystems.com
Website: reperito in rete

Descrizione: Di solito l'immagine grafica usata come sfondo della pagina web viene ripetuta verticalmente ed orizzontalmente nel caso in cui le dimensioni o la risoluzione grafica del video di chi la guarda fossero maggiori delle dimensioni dell'immagine stessa.

L'introduzione dei CSS ha cambiato non poco questa regola introducendo la possibilità di posizionare l'immagine in diversi punti dello schermo e decidere per la sua ripetizione ma in alcuni casi si rende necessario allargare o restringere questa immagine in modo da farla combinare perfettamente a qualsiasi risoluzione video e senza che venga ripetuta.

Questo script fa proprio questo ed è possibile vederlo in azione su questo link: immagine di sfondo a tutto schermo preleva il file.


Passo 1 : Scaricate prima il file: fixedbackground.js e salvatelo nella stessa cartella dove avete la pagina web alla quale applicare l'effetto.

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, non vi rimane che trasferire il tutto nella vostra pagina web, in questo caso all'interno dei tags: <head> e </head>.

seleziona tutto


Passo 2 : Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, non vi rimane che trasferire il tutto nella vostra pagina web, in questo caso al posto del tag: <body>.

seleziona tutto


Note : dovete cambiare nome_immagine col nome della vostra immagine completa di estensione grafica jpg o gif e siete a posto così, attenzione perché l'immagine si ridimensiona perfettamente alla porzione di schermo visibile quindi una dimensione rettangolare o comunque differente dalla dimensione originale distorcerebbe l'immagine stessa.


Solo CSS : Con la proprietà background-size dei CSS3, supportata dai nuovi browser, è possibile impostare semplicemente un'immagine come sfondo e questa si adatterà automaticamente alle dimensioni della pagina.

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, non vi rimane che trasferire il tutto o nel vostro foglio di style estrerno o nella pagina web, all'interno della dichiarazione di stile.

seleziona tutto


Questa proprietà è supportatra a partire dalle versioni: Safari 3, Chrome, IE 9, Opera 10, Firefox 3.6



Valutazione

Valutazione: 3.23 stelle su 5
N. Voti: (137)



  Elenco completo degli script.



Se avete domande da fare potete scrivere sul forum di supporto , gratuito e aperto a tutti.