Newsgroup: it.lavoro.professioni.webmaster
Titolo: pagina iniziale sito?

Buongiorno, ho realizzato un sito con wix e ho fatto una pagina iniziale che 
ho trasmesso sul dominio comprato altrove. La pagina iniziale contiene una 
foto a tutto schermo con la scritta entra e cliccando porta al sito wix. La 
grandezza della foto che ho messo � 1920pixel *1080. Ieri per� ho visto che 
su uno schermo mac da 27 pollici, questa pagina iniziale non copre tutto lo 
schermo.
Come dovrei fare per non avere questo problema?
Grazie 
 
 

Come dovrei fare per non avere questo problema?
 
Se vuoi anche evitare di distorcere l'immagine, la piu' semplice e' fare si'
che questa copra tutto lo schermo *possibile* usando CSS, ed aggiungerci uno
sfondo allargabile che copra ogni cosa. L'ho visto fare con sfumature e robe
vastase tipo bokeh, finte cornici, tileshade e cosi' via.
 
Se no limitati a mettere copertura 100% nel CSS.
 
Altrimenti, e sarebbe la cosa migliore, vai di media query.
 
 
http://www.w3.org/TR/css3-mediaqueries/
 
 
Leonardo
 
-- 
 
Questi non hanno speranza di morte; e la lor cieca vita e' tanto bassa,
Che 'nvidiosi son d'ogne altra sorte. Fama di loro il mondo esser non lassa;
Misericordia e Giustizia li sdegna; non ragioniam di lor, ma guarda e passa.

 Leonardo
 
Ti ringrazio ma non conosco queste cose, la pagina iniziale l'ho realizzato 
con frontpage. Pensavo fosse piu' semplice avere una soluzione.


 Come dovrei fare per non avere questo problema?
 
a parte che il mio iMac 27" di tre anni fa ha uno schermo 2560 x 1440,
come farai adesso che stanno uscendo i nuovi iMac con lo schermo da 5120
x 2880?
 
-- 
Maurizio Pistone    strenua nos exercet inertia  Hor.
 
http://blog.mauriziopistone.it
 
 
http://www.lacabalesta.it
 
 
http://blog.ilpugnonellocchio.it
 

 x 2880?
 
infatti per me non � un problema ma per i fanatici mac...ho scritto perch� 
ieri uno mi ha detto : ma non va bene la pagina che hai fatto! A me non 
riempie tutto lo schermo!
 
 

 riempie tutto lo schermo!
 
fatti un giretto sul web: quanti siti vedi che riempiono lo schermo con
un'unica immagine?
 
(In subordine: il motivo principale per cui apro un sito piuttosto che
un altro, � che voglio vedere l'immagine pi� grossa che si pu�?)
 
In realt�, la grossa grana oggi � esattamente l'opposto: come faccio a
fare un sito abbastanza piccolo perch� entri nello schermino del
telefono? Qui s� che c'� da rompersi la testa!


con frontpage. Pensavo fosse piu' semplice avere una soluzione.
 
Um, la devo prendere un po' larga.
 
Diciamo che hai una immagine 512 x 256. Questa e' la dimensione del JPEG. E
raffigura il pianeta Terra.
 
Ora lo mostri su uno schermo 640x480. Per farlo al 100%, devi stirare i 512
pixel perche' diventino 640 (quindi si allargano del 25%), ed i 256 perche'
diventino 480 (e si allungano dell'87.5%).
 
Il pianeta Terra ti diventa un ellissoide tipo palla da rugby per ritta.
 
Se  non stiri, ti rimane un bordo.
 
E non c'e' versi, non c'e' soluzioni: e' matematica. Quindi, per risolvere,
il modo "semplice" non esiste. Bisogna tu te li guardi tutti e decida quale
e' adatto al caso tuo.
 
"Semplice" potrebbe essere accettare la palla da rugby per ritta :-D.
 
Se questo NON e' un problema, puoi impostare nel CSS le dimensioni del JPEG
al cento per cento della pagina e avere, di volta in volta, sfere, o "quasi
sfere", o ellissoidi per ritti, o per schiacciato.
 
Se avere le palle schiacciate non e' un problema,
 
	body {
		background: url(backgrounds/earth.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
 
Metti invece che SIA un problema. Puoi allargare l'immagine o del 25% - nel
qual caso l'altezza sara' ancora insufficiente - oppure dell'87.5%. Pero' a
quel punto i 512 pixel di larghezza diventeranno 960, lo schermo ne ha solo
640, e quindi due strisce verticali di 160 pixel resteranno fuori.
 
Se questo NON e' un problema, invece di "background-size: 100% 100%", basta
che tu specifichi "background-size: cover;".
 
Una soluzione diversa e' avere una immagine ingrandita del minimo
 
	#image {
		background: url(backgrounds/earth.jpg);
		width: 100%;
		height: 100%;
		background-size: contain;
		 background-position: center;
	}
 
ma a questo punto l'immagine diventa da 512x256, 640x320; e rimangono fuori
due strisce orizzontali di 32 pixel. Per nasconderle tu metti un background
dietro quel background. Per esempio se i bordi del JPEG sono neri, ti basta
avere un background tutto nero.
 
	body {
		background-color: black;
	}
 
Altrimenti, puoi sfumare l'immagine in modo che il secondo background ci si
fonda insieme. Ci sono strumenti che fanno questo in automatico (si tratta,
in pratica, di copiare l'immagine 'earth', replicarne la cornice esterna di
pixel sulla cornice appena piu' interna, e di nuovo. Gli angoli devono, per
forza, essere sfumati pesantemente).
 
Oppure puoi dire: se il display e' meno di tot pixel uso una immagine e con
certe proporzioni, se e' sopra un tot, ne uso un'altra, e cosi' via. Questo
e' l'approccio media-query.
 
	@media (max-width: 640px) {
	    body {
		background: url(backgrounds/earth640.jpg);
		...
            }
        }
 
	@media (min-width: 1024px) 
                and (max-width: 1920px) 
		and (orientation: landscape) {
	    body {
		background: url(backgrounds/earth1024.jpg);
		...
            }
        }
 
	...
 
Leonardo
