WebSite X5Help Center

 
Salvo M.
Salvo M.
User

Sfondo pagina per responsive  it

Autor: Salvo M.
Visitado 1313, Followers 1, Compartido 0  

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>

Publicado en
12 RESPUESTAS - 1 CORRECTO
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... è 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...

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Salvo M.
Salvo M.
User
Autor

Se volessi provare con maximage2 cosa dovrei fare?

Leer más
Publicado en de Salvo M.
Salvo M.
Salvo M.
User
Autor

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? 

Leer más
Publicado en de Salvo M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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...

.



Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Salvo M.
Salvo M.
User
Autor

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

Leer más
Publicado en de Salvo M.
Salvo M.
Salvo M.
User
Autor

p.s. scusami l'ignoranza...ma i file js e css da dove li prendo?

Leer más
Publicado en de Salvo M.
Salvo M.
Salvo M.
User
Autor
Salvo M.
p.s. scusami l'ignoranza...ma i file js e css da dove li prendo?

e soprattutto dove li metto? nella cartella principale??

Leer más
Publicado en de Salvo M.
Salvo M.
Salvo M.
User
Autor

comunque se c'è un modo per togliere il contenuto e lo sfondo del footer su ogni singola pagina ho risolto alla grande

Leer más
Publicado en de Salvo M.
Salvo M.
Salvo M.
User
Autor

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

Leer más
Publicado en de Salvo M.
Salvo M.
Salvo M.
User
Autor

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? 

Leer más
Publicado en de Salvo M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Salvo M.
... ... ... cavolo così complicato riuscire a mettere una immagine di sfondo responsive? websitex5 si perde per così poco? 

...undecided... 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...

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Salvo M.
Salvo M.
User
Autor

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>

Leer más
Publicado en de Salvo M.