Sfondo pagina per responsive
Autore: Salvo M.salve a tutti,
premetto che ho dato gia un'occhiata ad altri post gia chiusi sull'argomento che però non sembrano risolti.
ho il seguente problema, l'immagine di sfondo per ogni pagina, se messa con programma normale mettendo "adatta il contenuto alla finestra", centrato....sul pc va benissimo e anche sulla simulazione da pc, ma sul telefono l'immaginae di sfondo appare zommata e dunque con visualizzazione pessima. Dunque in altri post leggendo ho trovato qualche codice da mettere, ma adesso l'immagine è schiacciata e non adattata...c'è qualcosa di sbagliato nel codice?
la pagina è la seguente http://www.torasushiroma.it/chi-siamo.html
e il codice è il seguente:
proprietà pagina-esperto-prima della chiusura del tag boady:
<div><img src="files/immagine.jpg" id="sfondo" alt="" /></div>
proprietà pagina-esperto-prima della chiusura del tag Head:
<style>
#sfondo{
position:fixed;
top:0;
left:0;
z-index:-2;
width:100%;
height:100%;
}
</style>
... è perchè su alcuni dispositivi obsoleti non funziona il CSS COVER; ...puoi confrontare con questo mio > esempio1 ...sul tuo dispositivo mobile...
... un'idea alternativa sarebbe quella di usare uno sfondo monoimmagine basata su maximage2, come in questo > esempio2 ...che puoi verificare sul tuo dispositivo se funzionasse correttamente...
.
Autore
Se volessi provare con maximage2 cosa dovrei fare?
Autore
Cioè posso avere i codici che hai messo tu? E dove metterli? Ad esempio nella home ho utilizzato un codice per.la slide in movimento...che ho collegato ad una pagina nascosta...e funziona sul telefono....potrei fare stessa cosa con le immagini di sfondo? Se si come devo fare?anziché codice wow slider nella pagina nascosta che codice metto? C'è una guida?
... vedi il sorgente (Ctrl+U); ...quello che è in HEAD (righe 6-20) lo metti in ESPERTO | /HEAD, e quello che è nel BODY (rigo 33) lo metti in ESPERTO | /BODY, ed alleghi in ROOT il file JS e CSS a servizio delle righe 6 e 7; ...ma dovresti già saperlo da altri argomenti simili che hai avviato...
.
Autore
io ho fatto adesso una cosa: ho creato una pagina ( invisibile) chiamada slide01, ho messo sfondo pagina con adatta alla finestra, dopo sulla pagina dove voglio che mi compaia l'immagine ho messo questo codice:
PRIMA DELLA CHIUSURA DEL TAG BODY
<div ID="sfondofull" style="position:fixed; top:0px; width:100%;height:100%;z-index:-1">
<iframe src="http://www.torasushiroma.it/slide01.html"
width="100%" height=100%; scrolling="no" frameborder="no" allowtransparency="true"></iframe> </div>
ora l'immagine sullo smartphone è perfetta, ma cè un errore, con se fa vedere anche il contenuto del footer, si vede anche dal pc... http://www.torasushiroma.it/chi-siamo.html
ora visto che ho quasi raggiunto l'obiettivo mi rimane da nascondere il contenuto del footer solo per queste pagine....
vi pregooooo aiutatemiii
Autore
p.s. scusami l'ignoranza...ma i file js e css da dove li prendo?
Autore
e soprattutto dove li metto? nella cartella principale??
Autore
comunque se c'è un modo per togliere il contenuto e lo sfondo del footer su ogni singola pagina ho risolto alla grande
Autore
mammamia non ne posso più. allora prendendo l'esempio 1 di kolasim, che sarebbe questo, sul mio dispositivo funziona, dunque faccio ctrl+u e prendo la stringa:
<style>body { background-image: url('https://cdn.pixabay.com/photo/2017/01/31/22/55/bank-2027944__340.jpg');background-size: cover; background-attachment: fixed; }</style>
cambio il link della mia immagine e lo metto prima della chiusura del tag body.....giusto?
bene al pc si vede bene, al cellulare non compare uno sfondo....eppure il codice è uguale al link di kolasim.....
vorrei risolvere questa cosa quanto primaaa
Autore
ragazzi, ho provato anche secondo esempio di kolasim, non so piu dove sbattere la testa, mi aiutate per favore? passo passo su cosa devo fare.
esempio 2 di kolasim, i fil e css e js ho copiato il contenuto da ctrl+u e con il blocco note ho creato i due file caricandoli sulla root....ma niente non si vede immagine
cavolo così complicato riuscire a mettere una immagine di sfondo responsive? websitex5 si perde per così poco?
...... dipende da te e non dal programma per quei dispositivi obsloeti!...
... il div_custom+iframe che hai riportato è sempre il mio metodo base, ...ed a quale dei miei esempi ti riferisci, ed in quale pagina l'hai applicato...?...
... se ti riferisci all'esempio monopagina con maximage2 (*), è semplicissimo, e basterebbe seguire le loro stesse istriuzoni, oppure rispettare quanto da me precedentemente detto, cioè i files a servizio da inviare nella ROOT del sito...
... comunque le regole sono le stesse che ti ha già fornito Mirko in altri argomenti...!...
_________________________________________
(*) - riepilogo del procedimento! ... ... scarica con il destro del mouse questi due files:
http://www.kolasim-zone.it/supersfondok/jquery.maximage.js
http://www.kolasim-zone.it/supersfondok/style.css
... questi due file, insieme alla tua immagine (nomeimmagine.jpg) (meglio max 300 KB) da usare per lo sfondo, li alleghi nel Pannello ESPERTO | ALLEGATI (per tutto il sito), oppure la stessa sezione in Proprietà della Pagina, oppure > Sezione Esperto - Oggetto Codice HTML ...lasciando "files" come destinazione (proposta per default)...
... nel Pannello ESPERTO | Codice personalizzato | Prima della chiusura del TAG </HEAD>, incolla questo codice:
<link href="files/style.css" rel="stylesheet" type="text/css" />
<script src="files/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
<script> $(function(){ jQuery('img.slidemaximage').maxImage({ isBackground: true, slideShow: false, slideShowTitle: false, slideDelay: 4, maxFollows: 'height', overflow:'auto', resizeMsg: {show: false} }); }); </script>
... nel Pannello ESPERTO | Codice personalizzato | Prima della chiusura del TAG </BODY>, incolla questo codice:
<img src="files/nomeimmagine.jpg" alt="" title="" class="slidemaximage" />
____________________________________________
... è semplicissimo, si tratta di elementari copia/incolla, e basta fare le prove con progetti semplici di PROVA fin quando non hai le idee chiare e sai padroneggiare a dovere il programma; ...più di così non saprei che altro aggiungere...
.
Autore
ho risolto così:
PRIMA DELLA CHIUSURA DEL TAG HEAD:
<style>
#tuodiv {
width: 100%; height: 100%; top: 0; left: 0;
background: url(FILES/IMMAGINE.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
DOPO L'APERTURA DEL TAG BODY:
<div id="tuodiv"></div>