Immagine di fondo e CSS per pc E PER smartphone 
Autore: GRS .Ho cercato nel forum ma non ho trovato nulla di utile o rispondente al mio caso. Non credo di scoprire un problema poco comune anzi e mi sembra strano che nessuno l'abbia trattato qui, credo purtroppo invece di non aver trovato il post giusto. Aiutatemi:
Come accidenti faccio a regolare con i CSS, l'immagine di background che sia adattabile sia per la navigazione con PC che con Smartphone????
il valore "background-size:cover;" non mi risolve il problema, ne le varie caratteristiche di "no-repeat left top; background-attachment: fixed;".
Il sito d'esempio è questo: www.grigioscuro.com/sulizzu/
ma dovreste navigarlo sia con PC che con smartphone per capire :-/
Con le 4 pagine tutte con caratteristiche diverse, ma nessuna che faccia in modo di vedere l'immagine di fondo in maniera "la più completa possibile".
Quello che vorrei fare io è fare in modo che l'immagine di fondo risulti sia non strecciata, sia che si veda almeno in piena larghezza in modo da capire cosa si vede nello sfondo. Ho messo un background graduato con le proporzioni di base 1600px e altezza 2600px. Avevo idea di far:
- ridimensionare l'immagine in piena larghezza quando si naviga da PC o Tablet
- e in piena altezza quando si naviga da Smartphone.
Vedi immagine allegata
Ma anche così è un bel problema trovare una foto panoramica che abbia senso sia stretta e alta che larga e bassa tipo cinemascope :-(
Autore
Adesso mi ritrovo un altro errore, il testo non va a capo nelle tabelle sotto il menù... sarà per le decine di modifiche
... dovresti aprire argomenti a tema diversi per ogni domanda(*)...
... quindi, ... relativamente alla domanda, non è chiaro come si dovrebbe presentare lo sfondo; ...considera che è in atto un rapporto proporzionale H/L con fattore ratio calcolato sulla finestra ospite...
... ho potuto verificare solo su PC, e lo sfondo si comporta in modo regolare e razionale con ancoraggio Alto/Sinistra...
... le due condizioni (●) risultano soddisfatte...
... verificando in modo virtuale, sembra anche lì regolare; ...puoi provare anche tu, qui: http://ami.responsivedesign.is/
.
(*) - per la seconda domanda, verifica con un Ctrl+Anteprima, ed appunto nel caso apri un nuovo Argomento...
.
ciao
Autore
Il 2° problema non mi preoccupa, è la prima volta che me lo fa e solo in un sito prova.
Per quanto riguarda il primo problema
background-size:cover
credo che sia perchè da mobile, navigo con un Lumia, quindi browser IE e avevo letto che dava problemi. Domani posto i salvaschermi di come vedo io lo sfondo. Intanto un sito esempio di come vorrei che si comportasse lo sfondo, è questo: www.meloniefresu.com
... ancoraggio Centro/Centro con resize ratio, visto la prima volta in un mio esempio di diversi anni fa: http://www.zspace.it/kolasim/swiffy/CentroCentroAngoli_2.html
... pertanto per avere quel tipo di resize, in ambiente jQuery, risolverai con il metodo storico, semplice e valido proposto da MirKo, che nel caso potrai contattare dal suo Profilo: https://helpcenter.websitex5.com/post/21241
... se invece ti interessa il semplice resize-ratio dello sfondo, senza oggetti nella riga, ...puoi usare nella riga una cella unica a tutta larghezza una immagine PNG o GIF trasparente con rapporti congrui alla immagine di sfondo, per esempio in 16:9 > 800x450px...
.
ciao
Autore
Ciao KolAsim, grazie delle risposte tempestive.
Mi preoccupa questa nota nel style.css base:
/*le immagini non scrollano.non funziona in IE6*/
Comunque provo a vedere di modificare o riscrivere i miei css e poi posto il risultato. Questo perchè non vorrei una slideshow come sfondo, ma una sola immagine.
Intanto posto i salvaschermo di come vedo lo sfondo nel mio sito esempio con IE su Lumia
Autore
Grazie a tutti, sopratutto a MirKo e ai suoi consigli, ho risolto con le Jquery associate alle singole pagine. Funziona sia il ridimensionamento delle pagine, che la slideshow (anche se non era la mia priorità). Per l'immagine statica basta modificare leggermente il codice da inserire nelle silgole pagine del sito!
http://www.grigioscuro.com/sulizzu/landscape.html