Responsive immagine di sfondo per pagina 
Autore: Giorgio C.
Visite 2080,
Followers 2,
Condiviso 0
In alcune pagine (create SENZA applicare il Modello) ho inserito una immagine di sfondo (Proprietà, grafica) selezionando "adatta al contenuto della pagina".
A risoluzioni inferiori a desktop non si adatta alla risoluzione di visualizzazione ma viene tagliata; se non ricordo male, mi pare di aver letto che è una....ehm.... "caratteristica" del software (il fatto che questo contesto non sia responsive).
Se è così, ci sono soluzioni alternative per averla responsive quell'immagine di sfondo?
Postato il
... ci sarebbero le mie invenzioni, cross browser, e nel caso se ne riparlerà dopo...
... intanto, prova ad incollare questo codice prima della chiusura di </HEAD>
<style> html{ background: url(https://cdn.pixabay.com/photo/2017/01/31/22/55/bank-2027944__340.jpg) ; background-position: center center; background-repeat: no-repeat;height:100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} </style>
... dovresti vedere >> questa immagine di sfondo...
... prova con vari browser e con vari dispositivi "mobile" in quanto alcuni sono obsoleti...
.
Autore
NIET....taglia....
provato su smartphone normale e landscape; idem con tablet. Sia Edge sia Chrome.
Ovviamente ho preventivamente tolto il mio sfondo.
Autore
Scusa, correggo. In modalità landscape si vedono correttamente sia su smartphone che tablet; viene tagliato in modalità portrait:
SMARTPHONE
TABLET
...scusa Giorgio, ma...
se la tua immagine è molto larga , adattandosi all'altezza con le ottime istruzioni di KolAsim (
) è ovvio che verrà tagliata in larghezza per mantenerne le proporzioni... altrimenti verrebbe deformata... oppure se si adattasse in larghezza e la pagina fosse molto lunga , poi sotto ti ritroveresti senza sfondo...
Autore
Claudio,
sicuramente sei pù preparato di me, ma allora mi spieghi perchè in home page ho lo wow slider e le foto (1920x500px) si ADATTANO, mantenendo le proporzioni, alle varie risoluzioni? www.diariovacanze.it
Probabilmente perchè c'è un codice all'interno che consente ciò: se c'è la possibilità di ottenere tale effetto anche con immagine di sfondo pagina bene, altrimenti non ne faccio certo un dramma per quanto mi lasci perplesso un sito responsive al 90%
questo dell'immagine di sfondo è un falso problema. Vedere un'immagine di sfondo a tutto schermo su un desktop (orizzontale) ha una sua particolarità. Altrettanto vedere un'immagine di sfondo a tutto schermo su monitor verticali; dovresti vedere solo i particolari dell'immagine ed è giusto che sia così.
Scusa ma , sono due cose completamente diverse.
immagino che tu ti riferisca ad un'immagine su una banda orizzontale che giustamente si autoridimensiona... e sotto hai altri contenuti che ti riempiono la pagina ...
invece tu parli di un'immagine di sfondo... che quindi deve obbligatoriamente occupare tutta l'altezza , e l'unico modo è tagliarla in modo proporzionale come ti ha proposto KolAsim
se l'immagine di sfondo si adattasse in orizzontale, sotto avresti il vuoto...
Autore
Questo è quello che già succede senza codici EXTRA. Se ad esempi vai qui http://www.diariovacanze.it/africa.html e riduci lo schermo vedi che "si taglia".
Sicuramente hai ragione tu, però se io rimpicciolisco lo schermo (da desktop a scendere, quindi) avendo meno spazio anche l'immagine si riduce: non si riesce quindi a mantenere la proporzionalità ma con l'immagine intera?
E' ovviamente una pura domanda per manifesta incompetenza.....
...ti ho già risposto...
per vedere tutta l'immagine dovrebbe deformarsi...
se una cosa è larga 100 x 50 per farla stare in uno spazio largo 20 e alto 100 devi per forza mostrarne solo una parte
e ti ha spiegato anche Dan:
La differenza tra farlo con codici extra e senza è che su alcuni dispositivi obsoleti o particolari apple , è che non riconoscono certe istruzioni è che l'immagine viene deformata a prescindere...
se non noti la differenza tra l'immagine che hai messo con wowslider , in pratica su una riga , e l'immagine di sfondo che deve occupare tutta la pagina , non saprei proprio come spiegarmi diversamente ...
Autore
no... no... la noto eccome la differenza !!
Ho capito il meccanismo ( il post di ABCDweb Agency mi era sfuggito), allora lasciamo le cose come stanno.
Grazie a tutti.
... tanto per dir la mia, rispetto ad altri Topic, non sarei sicuro delle deduzioni emerse, e dovresti provare su vari dispositivi...
... se ho capito, dovrebbe dipendere dal ridimensionamento ratio, come anticipato da Claudio...
... rispetto al codice, per poter io capire se per caso non ci fossero altri problemi, ...nei tuoi dispositivi la mia precedente immagine si vede in modo diverso da come si vede in >> questa nuova mia immagine (mazimage) di sfondo...?...
... l'effetto risultante dovrebbe essere uguale alla mia >> invenzione, la prima in assoluto, per sfondi HTML con resize ratio a priorità W/H, nata in ambiente SwishMax, e questa funzionante in qualsiasi browser...
... oppure si comporta regolarmente negli stessi modi...?...
... ridimensionando la finestra si noterà come viene ritagliata l'immagine che rimane centrata mantenendo un aspetto proporzionale esteso a tutta la finestra...
... in questo mio schema è riassunto in grafica ciò che dovrebbe avviene realmente:
... (... personalmente farei come detto all'inizio del mio precedente post, semplice, immediato, funzionale, flessibile, indipendente dal progetto, cui gli esempi postati qui, per il mio DIV_CUSTOM+IFRAME...)
... per varie ed eventuali nel caso fatti risentire...
.
Autore
KolAsim,
provato a ridimensionare al volo il browser con la tua invenzione, a pelle direi che si comporta meglio. Le altre due sono fra di loro la stessa cosa.
Tuttavia sono un pò incasinato con i preparativi perchè domani parto per le ferie. Al ritorno, faccio prove più "scientifiche" sul mio sito poi ci risentiamo con i riscontri (in nuovo topic). Per ora grazie per la disponibilità.