FOTO a tutto schermo come sfondo homepage

[enrico nocito]

 Ciao a tutti....
Sto tentando di settare una fotografia come sfondo a pieno schermo della mia homepage:   http://www.enriconocito.com
Purtroppo, dopo vari tentativi, non riesco a farla rientrare tutta nello schermo in quanto l'immagine a seconda della risoluzione del video mi viene piu' o meno ingradita e cosi' facendo, spesso, alcuni particolare dello scatto non vengono fatti visionare.
Vorrei che lo scatto si vedesse per intero in home page..... ho settato nelle funzioni della pagina "Adegua ala pagina" in quanto e' l'unica funzione che mi permette di far vedere la foto per intero e senza gli antiestetici bordi superiori o laterali bianchi.
Dove sbaglio?  Non ci sto capendo piu' nulla.
Grazie

[milux]

il problema nasce sempre dall'aspect ratio delle foto che si devono adattare alle varie dimensioni dello schermo.

prova ad utilizzare backstretch resizer ; trovi qui http://test.3md.it/bsc/ demo e spiegazioni ; l'argomento era anche trattato qui http://www.unofficialwsx5.com/index.php?topic=1103.0 ma rimanda sempre allo stesso.

[enrico nocito]

grazie mille per la risposta.
Ho provato ieri sera ma nulla da fare.
Sono ritornato con il sito al vecchio layout.

[milux]

ciao, stavo provando alcuni script per le immagini di background e mi sono ricordato del tuo post. Potresti ri-mettere l'immagine che volevi utilizzare come sfondo?

[enrico nocito]

MILUX grazie per il pensiero ma non riesco a capire cosa devo fare!!!!!
Scusa ma e' un periodo dove sono incasinatissimo........

[milux]

metti in allegato l'immagine che volevi utilizzare come sfondo...

[enrico nocito]

[ Guests cannot view attachments ] non ne ho una in particolare...... te ne allego una che potrebbe andare bene,
 

[milux]

Allora dopo aver provato diversi script codici e altro, la soluzione l'abbiamo trovata ma come immaginavo non è visivamente piacevole perchè oltre ad una eventuale sgranatura c'è anche l'effetto distorsione dovuto all'adattamento delle dimensioni dello schermo e risoluzione. Quello che noi progettiamo con il nostro schermo lo vediamo in un certo modo ma poi  chi apre la pagina  dall'esterno ha dei monitor differenti e quindi lo vede sicuramente in altro modo.

Partiamo dal fatto che le immagini create con le macchine digitali hanno un rapporto di 1:5 e che le risoluzioni degli schermi hanno invece un rapporto di 1:33 : ne consegue che quando l'immagine viene "adattata" allo schermo una parte viene sempre tagliata fuori perchè i rapporti sono diversi.

 Con immagini native invece che rispettano il rapporto 1:33 utilizzando le funzioni di adattamento immagine , non cè nessuna distorsione e/o taglio di parti della foto. Questo succede con le macchine digitiali a secondo del tipo di sensore utilizzato. Nel mio caso (Canon 5D) con il sensore full-frame che emula il formato pellicola 24x36, le immagini escono fuori con il rapporto 1:5. Se invece utilizzassimo il 4/3 o il micro 4/3 (ad esempio Olympus) avremmo un formato immagine di 1:33 . Se fai un controllo sulle risoluzione degli schermi https://it.wikipedia.org/wiki/Risoluzioni_standard noterai che la risoluzioni più usate hanno appunto un rapporto 1:33 (1024/768)

Detto questo alcuni esempi :

http://test.3md.it/background-esempio-1.html e http://test.3md.it/background-esempio-2.html  ho utilizzato immagini con rapporto nativo 1:33 che non subiscono deformazioni nell'adattamento.

http://test.3md.it/background-esempio-3.html qui invece la tua immagine (rapporto 1:5) adattata allo schermo (rapporto 1:33). Ovviamente non so quale schermo tu abbia e come la vedi ma la funzione che ho utilizzato rileva la dimensione del monitor e adatta la dimensione immagine.


http://test.3md.it/background-esempio-4.html qui vedi la stessa immagine con la sola funzione di adattamento allo schermo che taglia la parte sottostante..

http://test.3md.it/background-esempio-5.html qui invece l'ultima immagine che hai inviato.

Prima di darti la soluzione (anche se la puoi vedere dal codice delle pagine) dimmi cosa ne pensi..

[enrico nocito]

Milux grazie mille per lo sbattimento.
 
http://test.3md.it/background-esempio-3.html qui invece la tua immagine (rapporto 1:5) adattata allo schermo (rapporto 1:33). Ovviamente non so quale schermo tu abbia e come la vedi ma la funzione che ho utilizzato rileva la dimensione del monitor e adatta la dimensione immagine.

questa sopra penso sia la soluzione migliore.

[milux]

funziona così :

nella pagina inserisci codice html :

Codice:

Only registered users can see contents. Please click here to Register or Login.
sezione esperto codice CSS :

Codice:

Only registered users can see contents. Please click here to Register or Login.
nel file allegato al codice inserisci l'immagine con il percorso (NB : il nome immagine e il percorso devono collimare con quanto inserito nel codice <img src="img/nome-immagine.jpg" ...


nella proprietà di pagina, sezione esperto , prima della chiusura tag head inserisci la funzione.

Codice:

Only registered users can see contents. Please click here to Register or Login.
NB : purtroppo all'apertua della pagina si vede il codice che viene elaborato prima dell'immagine; qui purtroppo non so come fare..

[enrico nocito]

grazie mille
no nappena ho un attimo di tempo vedo di fare il tutto.

[lemonsong]

NB : purtroppo all'apertua della pagina si vede il codice che viene elaborato prima dell'immagine; qui purtroppo non so come fare..

Attualmente la funzione è fuori dai tag <script> e </script>

[stesil]

@milux

Mi posso sbagliare, ma mi sembra che quella funzione js non faccia nulla di più di quanto già fa il css. Prova a visualizzare la pagina con javascript disabilitato....

All'immagine vengono attribuite dal css altezza e larghezza 100%, quindi pari alle dimensioni della finestra del browser ... e l'immagine viene distorta.

Lo script js non fa altro che verificare che i rapporti winwidth / imgwidth e winheight / imgheight sono pari a 1 e attribuisce nuovamente all'immagine come valore di larghezza la larghezza della finestra e come valore di altezza l'altezza della finestra ... cosa che aveva già fatto il css.

[milux]

@milux Mi posso sbagliare, ma mi sembra che quella funzione js non faccia nulla di più di quanto già fa il css. Prova a visualizzare la pagina con javascript disabilitato.... All'immagine vengono attribuite dal css altezza e larghezza 100%, quindi pari alle dimensioni della finestra del browser ... e l'immagine viene distorta. Lo script js non fa altro che verificare che i rapporti winwidth / imgwidth e winheight / imgheight sono pari a 1 e attribuisce nuovamente all'immagine come valore di larghezza la larghezza della finestra e come valore di altezza l'altezza della finestra ... cosa che aveva già fatto il css.