Immagine sfondo della cella 
Author: Diego F.
Visited 705,
Followers 1,
Shared 0
Sito internet www.dolomitiebambini.com
vorrei poter utilizzare, in versione desktop, limmagine gia presente sul sito mentre in versione Smartphone vorrei poterne utilizzare un'altra o magari riuscire anche solo ad adattare quella in essere allo schermo piu piccolo.
È fattibile? suggerimenti?
grazie a tutti
Posted on the
Ma parli dell'immagine delle dolomiti perchè nelle celle non c'è nessuna immagine, quella delle dolomiti non l'hai messa come sfondo della cella ma in stile righe con effetto parallasse e non è responsive, se ti intendi un ò di programmazione potresti lavorare con i @mediascreem ed assegnare per ogni risoluzione un'immagine diversa.
OPS !!! @mediascreen
Author
Ciao Patrizia e grazie per la risposta. non mi intendo di programmazione pero si e stata messa in stile righe paralellasse. se la metto responsive cambia automaticamente giusto?
grazie ancora
... il codice che segue, messo in questa posizione (copia/incolla) ti sostituisce l'immagine sotto ai 480 pixel di risoluzione:
>> Passo 3 - Mappa > Finestra Proprietà Pagina HOME > Le opzioni della Sezione Esperto | ▪Codice personalizzato: 3^opzione > Prima della chiusura del tag HEAD;
... codice:
<style>
@media (max-width: 479px) {
#imPageRowGraphics_1 { background: transparent url('https://cdn.pixabay.com/photo/2013/08/24/08/34/three-zinnen-175213__340.jpg') no-repeat center center; background-size: cover;}
</style>
...
...!... attenzione! ... attualmente stai usando un'immagine eccessivamente grande per il web; ...più del doppio per le misure, e almeno venti (20)! volte più pesante di quello che servirebbe...!...
.
Author
Kolasim grazie mille. il codice che hai indicato () dovro modificarlo con il mio oppure uso direttamente quello che hai scritto?
immagine effettivamente non ho pensato a ridimensionarla. che misure consigli? Grazie ancora
... puoi sì usare una tua immagine (max 800x800px, max 50-100 KB), per esempio "nomeimmagine.jpg" che alleghi al progetto in uno dei modi previsti (>1), (>2), lasciando "files" come cartella destinataria proposta per default...
... in questo caso il codice relativo alla tua immagine diventerà questo:
<style>
@media (max-width: 479px) {
#imPageRowGraphics_1 { background: transparent url('files/nomeimmagine.jpg') no-repeat center center; background-size: cover;}
</style>
.
ciao
---------------------
...!... quella grande che stai usando adesso meglio sostituirla con una di max 1800x1800px, max 150-200 KB...!...
-
Author
Kolasim perdonami ma non sono molto esperto e sto cercando di capirmi....
... in questo caso il codice relativo alla tua immagine diventerà questo:
<style>
@media (max-width: 479px) {
#imPageRowGraphics_1 { background: transparent url('files/nomeimmagine.jpg') no-repeat center center; background-size: cover;}
</style>
La parte relativa al files/nomeimmagine.jpg io l'immagine l'ho salvata nel desktop e vorrei caricarla partendo dalla sua attuale cartella. Basta che nella stringa indico il nome del file (es. trecime.jpg)? senza il percorso completo? (C:\Users\Diego\Desktop\........) oppure devo prima caricare l'immagine in una cartella definita?
Grazie ancora
... basta semplicemente allegare l'immagine al progetto in uno dei due modi detti prima >> [ (>1), (>2) ]; ...clicca sui numeri e si aprirà la relativa Guida; ...l'immagine la preleverai normalmente dal tuo PC...
... l'immagine verrà automaticamente trasferita in rete durante la fase di esportazione, nella cartella detta prima, "files"...
... fai una semplice prova e puoi verificare anche in anteprima, riducendo la finestra del browser sotto i 480 pixel di larghezza...
.
Author
ho fatto e ti ringrazio. Se però guardo Iphone in verticale l'immagine non si vede mentre se lo metto in orizzontale si vede correttamente dimensionata. Hai suggerimenti?
... non posso valutare, ...in rete non risulta applicato il codice extra...
... avvisa per quando lo avrai pubblicato, e poi si vedrà di cosa si tratta...
.
Author
Ok fatto!!
... OK, ...non hai usato il mio codice, ...ma hai ben sostituito l'immagine (1600x1200), e di peso quasi accettabile (553 KB)...
... se non con il tuo programma di grafica, ...puoi semplicemente ridurre ulteriormente il peso di oltre il 50% con questo servizio online https://tinypng.com/
... provalo...
.
ciao
.
Author
Kolasim ciao e grazie ancora. il tuo codice lo avevo utilizzato ma ho dovuto levarlo perche in versione smartphone (messo verticalmente) limmagine non viene pubblicata. se hai voglia stasera dopo cena ripubblico con il tuo codice in modo che tu possa verificare! per peso immagine provvedero ad ulteriore allegerimento. ho fatto stessa cosa anche con il video che ho messo in home
... ok, verso le 20 - 20,30 ...poi chiudo...
... già così comunque, se alleggerisci come detto, avresti un buon compromesso...
.
Author
Kolasim per le 20 pubblico con modifica grazie mille
... il codice funziona, ...ma come puoi vedere, manca la nuova immagine ridotta per il mobile:
https://www.dolomitiebambini.com/files/trecime.jpg
Author
... ho capito...
https://www.dolomitiebambini.com/files/trecime.JPG
... è rimasta la stessa immagine e non è una nuova adatta allo scopo...
... hai sbagliato ad usare l'estensione in maiuscolo .JPG (o viceversa)...
... se usi questa immagine, il codice non serve...
.
non ho letto tutto il post... l'immagine c'è ma ha l'estensione maiuscola, va corretta o l'immagine o il codice
https://www.dolomitiebambini.com/files/trecime.JPG
Author
ok ho modificato immagine a definizione 400x...
ho cambiato estensione in AVANZATE mettendo JPG
e ripubblicato...
Author
il problema era estensione del file. Purtroppo diminuendo definizione la foto sgrana. E' piu facile a questo punto cambiare immagine però... Grazie a tutti davvero!!!! Grazie soprattutto a Kolasim che mi ha supportato e sopportato.
...scusate se mi intrometto...
ma io non vedo manco il video ...
ok, funziona...
... sgrana un po' perchè la finestra è verticale e l'immagine è orizzontale...
... prova ad usare un'immagine ritagliata quadrata, o meglio, a sviluppo verticale...
.
...vado; ...casomai ci risentiremo domani...
.
Author
Claudio ciao. mi sembra strano che tu non riesca a vedere il video. io ho provato con Safari, Chrome e IE e funziona. hai qualche suggerimento? grazie ancora
... il video non lo vedo solo sul mio browser Firefox, che per natura preferisce *.ogg e *. webm...
... è regolare sul mio vecchio Chrome.49 e sullo smartphone...
... ovviamente per convenzione non potrà funzionare l'autoplay...
.