cao a tutti, vorrei impostare lo sfondo allegato sotto in una pagina web
lo sfondo è stato realizzato con photoshop e rappresenta un foglio invecchiato dal tempo
l'effetto che vorrei dare alla pagina è proprio quello dei laterali leggermente più scuri rispetto al centro, proprio come questa immagine...
come potrei farlo per adattarlo alle diverse risoluzioni?
grazie!!!
Uno script Javascript che riconosca la risoluzione dello schermo e adatti le dimensioni dell'immagine alla risoluzioneOriginariamente inviato da ratlook
cao a tutti, vorrei impostare lo sfondo allegato sotto in una pagina web
lo sfondo è stato realizzato con photoshop e rappresenta un foglio invecchiato dal tempo
l'effetto che vorrei dare alla pagina è proprio quello dei laterali leggermente più scuri rispetto al centro, proprio come questa immagine...
come potrei farlo per adattarlo alle diverse risoluzioni?
grazie!!!
ci ci avevo pensato ma dovrei farne tantissimi...
pensa a tutti i formati sia 4:3 che 16:9...
non ci sarebbe qualcosa che magari mi ridimensioni l'immagine in base alla risoluzione?
o magari anche soluzioni diverse?
E io cosa ti ho detto? Uno script che ridimensiona l'immagine!!!Originariamente inviato da ratlook
ci ci avevo pensato ma dovrei farne tantissimi...
pensa a tutti i formati sia 4:3 che 16:9...
non ci sarebbe qualcosa che magari mi ridimensioni l'immagine in base alla risoluzione?
o magari anche soluzioni diverse?
Personalmente non la trovo una soluzione elegante. Cosa c'è di male ad avere una pagina a larghezza fissa ?
gufo scusa... avevo capito che volevi farmi reindirizzare l'utente in base alla sua risoluzione ai diversi sfondi...
papillon68 spiegami bene!
Volevo solo dire che non è una tecnica molto utilizzata quella di ridimensionare l'immagine di sfondo in base alla risoluzione della finestra del browser.
Io propenderei di più per trasformare l'immagine di sfondo in "tileable", cioè che si ripete in senso orizzontale e verticale con continuità.
E poi applicare la suddetta immagine come sfondo al body con background repeat-x repeat-y in modo che copra automaticamente tutta la finestra, a prescindere da quanto grande sia.
E se l'immagine non si può ripetere? Potrebbe anche essere un'imagine che ripetuta sarebbe una ciofega!Originariamente inviato da papillon68
Volevo solo dire che non è una tecnica molto utilizzata quella di ridimensionare l'immagine di sfondo in base alla risoluzione della finestra del browser.
Io propenderei di più per trasformare l'immagine di sfondo in "tileable", cioè che si ripete in senso orizzontale e verticale con continuità.
E poi applicare la suddetta immagine come sfondo al body con background repeat-x repeat-y in modo che copra automaticamente tutta la finestra, a prescindere da quanto grande sia.
Cosa c'è che non va in un ridimensionamento?
Non e` facile trovare una soluzione al quesito specifico.
In particolare non e` possibile stirare un'immagine usata come sfondo.
Una possibilita` e` quella suggerita da Gufo, di fornire un'immagine in base alle dimensioni della finestra: nota NON ho detto "dimensioni dello schermo", perche` ci sono molti (specie i programmatori o gente che con i computer ci lavora) che navigano in una finestra, lasciando altre applicazioni visibili in background.
Quindi si tratterebbe di:
- inviare una pagina velocissima che tramite JS legge le dimensioni della finestra
- ricevere le info di ritorno
- inviare la pagina vera con lo sfondo opportuno
In questo caso si puo` anche pensare di dare dimensioni fisse, cioe` fissare dei limiti per cui se uno ha la finestra di 850px gli si invia l'immagine fatta per 800 facendo in modo che il sito si muova sempre dentro la finestra di 800 (in pratica un sito a larghezza fissa, in cui ci sono varie opzioni di larghezza in base alla dimensione della finestra).
Altra possibilita` e` di usare due livelli: uno di sfondo in cui si inserisce un'immagine in primo piano (tramite il tag <img> che quindi permette la "stiratura"), ed unpiano superiore conil contenuto del sito.
Questa soluzione e` abbastanza semplice (ma occorre conoscere i posizionamenti, che di solito sono tra le cose piu` complesse e dimenticate nei corsi), pero` questo metodo e` contrario alla semantica, e quindi potrebbe essere considerato non-accessibile.
Ultima opzione (tra quelle che mi vengono in mente) e` usare uno sfondo omogeneo per la parte centrale della pagina, ed usare degli elementi di bordo per realizzare le sfumature. Questo metodo e` probabilmente il piu` corretto, ma con le tecniche attuali (CSS2) e` piuttosto laborioso da realizzare, e necessita di marcatura supplementare.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
ops... la facevo mooolto più semplice!
grazie a tutti!
Permessi di invio
Rispondi quotando