Sfondo pagina a tutto schermo a prescindere dalla risoluzione

m.pittini

Utente Attivo
26 Feb 2009
231
6
0
Ciao a tutti, esiste una soluzione per avere un'immagine di sfondo a tutto schermo che risulti sempre così anche se cambia la risoluzione del monitor? Debo preparare dieci immagini differenti per ogni risoluzione oppure esiste qualche trucchetto in CSS o con javascript?
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, utilizza css3 in questo modo:
applica la proprietà background-size con l’attributo "cover" al tag html:
PHP:
<style>
 html {
    background: url(immagine/tuo-sfondo.jpg) no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 }
</style>
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Se avessi usato il tasto cerca del forum avresti visto che ne abbiamo già parlato di questo argomento, comunque sia non serve usare un div per lo sfondo, basta la proprietà background con width ed height impostati su 100% su body.
Codice:
body            {
width:   100%;
height:  100%;
margin:  00px 00px 00px 00px;
background: url(../img/firma.png) no-repeat fixed;
background-size:100% 100%;
background-color:#666666; /*Questa regola è opzionale, puoi anche ometterla*/
}

Certo è che in questo modo qualunque sia la dimensione della finestra lo sfondo la coprirà sempre ma può apparire distorto a certe risoluzioni o ridimensionamenti della finestra (basta provare a stringere parecchio la finestra, si vedrà lo sfondo tutto schiacciato).
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Grazie mille ad entrambi, coi vostri consigli ho risolto!
Ciao
mmmh! Risolto? Con i css come ti hanno detto è facilissimo avere un'immagine deformata e a tutt'oggi ancora la maggioranza degli utenti usa browser che non supportano i CSS3.

Basta fare una piccola ricerca sul web per trovare soluzioni con JS che risolvono meglio il problema
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Non è per essere cattivi, però io non starei neanche più di tanto dietro alla negligenza.
Se uno non ha voglia di aggiornare i propri browser poi è inutile che si lamenti se un sito si vede male o non si vede proprio.
Mi posso anche sbagliare, ma la retrocompatibilità è una cosa che si prende in considerazione quando si parla di cose tipo siti web comunali, o comunque progetti dove l'accessibilità ha un'importanza di gran lunga superiore all'immagine.

Solo per puntualizzare: come ho detto l'esempio del progetto per il comune.
Il sito web (o portale) di un comune non deve essere figo, o bello, o con effetti di animazioni; deve fornire informazioni, deve fare in modo che queste informazioni siano consultabili a pieno da chiunque ne abbia bisogno ed è per questo che l'estetica è seria e senza tanti fronzoli.
Poi se uno ha tempo e voglia di rendere totalmente accessibile un progetto che abbia anche un'estetica all'avanguardia.... tanto di cappello! ma inutile.

Se parliamo invece di Crossbrowsing allora sono pienamente d'accordo con l'utilizzo di JS.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Molte volte non è una questione di negligenza ma è una questione di incompetenza, molti non sanno neanche che vanno aggiornati o come si fa.

Se io ho un sito dove pubblicizzo la mia attività, voglio che sia visto e bene da tutti negligenti, incompetenti, sfaticati ecc. ecc. e non mi importa nulla se uno ha voglia o no di aggiornare i browser a patto che diventi un mio potenziale cliente vedendo il mio sito bello e accattivante
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Personalmente mi pare una "stupidata" utilizzare javascript per uno sfondo...

Puoi usare i CSS3, ed ottenere uno sfondo che, male che vada, sarà tagliato lateralmente o verticalmente, mai mai ripetuto o non centrato.

In questa guida si spiega come fare:
http://css-tricks.com/perfect-full-page-background-image/
Come ho già detto sopra i CSS3 non sono supportati dalla maggioranza degli utenti, pertanto:
  1. Sono d'accordo con voi per i CSS3 se io devo fare un sito per un utenza che apprezza la tecnica e ha i browser aggiornati.
  2. Sono d'accordo per i CSS3 se voglio fare un sito per il mio gusto personale
  3. Sono d'accordo per i CSS3 per tanti altri motivi
  4. Non sono d'accordo assolutamente se io ho bisogno di un sito dove devo attirare la maggioranza e il più possibile dell'utenza e pertanto me ne devo fregare delle belle teorie perché ho bisogno di contattare anche i più sprovveduti
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Se sono così sprovveduti allora significa che magari neanche lo cercavano il tuo sito...
Comunque sia (magari con toni più garbati) ma anche io penso che con CSS si possono fare tutti gli effetti con le immagini.
Poi se chiaramente uno vuole effetti più esagerati tipo che so, far cambiare sfondo in base alla pagina, oppure farlo cambiare ogni tot secondi, e via dicendo allora si, forse è meglio avere un po di nozioniin javascript, però a questo punto per come la vedo io non si parla più di un progetto qualitativamente professionale, ma di una pacchianata vera e propria.
Ricordo che sono solo opinioni personali prima di essere messo alla forca.
Ciao a tutti.
 
Discussioni simili
Autore Titolo Forum Risposte Data
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
Y cambiare sfondo di una pagina Javascript 1
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
S Se voglio far scorrere le immagini dello sfondo di una pagina (oviamente html) come faccio? HTML e CSS 1
S Come faccio a far scorrere delle immagini come sfondo di una pagina? Discussioni Varie 1
L Sfondo pagina web con php PHP 1
S Tag OnMouse e Sfondo pagina HTML e CSS 2
B Foto sfondo pagina Webdesign e Grafica 2
G Pagina di >Sfondo Webdesign e Grafica 13
M Sfocare sfondo Photoshop CS6 Photoshop 2
K Sfondo nuovo file Photoshop 0
gara1 inserire immagine di sfondo in canvas Javascript 0
A Immagine decentrata con sfondo trasparente Photoshop 0
L Non riesco a riprodurre uno sfondo Photoshop 0
Cosina Cambio colore sfondo al click Javascript 2
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
G Modifica immagine di sfondo attraverso un bottone PHP 18
G Fare uno sfondo con il prato e degli alberi Photoshop 0
J Info per copia sfondo Photoshop 2
S Scontorno, cambio sfondo, alone Photoshop 1
N sfondo trasparente photoshop 2019 Photoshop 2
Y Colore sfondo testo Javascript 0
Domenico_Falco1 [Javascript] [HTML] Campi form con sfondo imposto dal browser Javascript 5
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
L [HTML] Problemino con le immagini di sfondo HTML e CSS 4
felino [Wordpress] Immagine di sfondo (sotto il template) WordPress 8
R [HTML] sfondo header HTML e CSS 0
A [HTML] Sfondo responsive - problema specifico HTML e CSS 5
asevenx [HTML]Problemi float e adattamento sfondo HTML e CSS 2
A [Javascript] Impostare immagine sfondo da checkbox, sito web Javascript 1
O Allo scroll cambiare colore di sfondo jQuery 0
V javascript - cambiare immagine di sfondo di un div Javascript 3
P [HTML] Sfondo colorato di un div contenitore di altri due div HTML e CSS 9
R [Flash] Animare un testo con un' immagine sullo sfondo Windows e Software 7
dany81 [Photoshop] Eliminare più sfondo possibile... Photoshop 3
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
R Sfondo animato per sito con Adobe Muse Windows e Software 3
Fuego2806 Stampare dati Form su immagine di sfondo con html HTML e CSS 1
Fuego2806 [PHP] Stampare dati Form su immagine di sfondo con html PHP 70
Gregia Immagine con testo affianco (sfondo colore diverso) HTML e CSS 8
utente testo scorrevole con sfondo colorato con css esterno HTML e CSS 6
I Salve, ho un probelma con una mappa d'immagini usata come sfondo HTML e CSS 3
S impostare colore sfondo di ogni cella di una datagridview Visual Basic 1
S Immagini multiple come sfondo HTML e CSS 3
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
Q Pubblicità al posto dello sfondo vbulletin 4 HTML e CSS 0
Zea problemi duplicazione immagine di sfondo HTML e CSS 3
M problema immagine di sfondo e risoluzione schermo HTML e CSS 1

Discussioni simili