Sfondo pagina a tutto schermo a prescindere dalla risoluzione

[m.pittini]

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]

Ciao, utilizza css3 in questo modo:
applica la proprietà background-size con l’attributo "cover" al tag html:

<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]

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.

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).

 

[m.pittini]

Grazie mille ad entrambi, coi vostri consigli ho risolto!
Ciao

 

[Max 1]

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]

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]

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

 

[Fez Vrasta]

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/

 

[Max 1]

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

 

[Fez Vrasta]

io fossi in te me le studierei un po quelle belle teorie
http://en.wikipedia.org/wiki/Progressive_enhancement

dato che se esistono non è perche sono tutti idioti:hammer:

 

[Jonn]

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.