WebSite X5Help Center

 
Marco Z.
Marco Z.
User

Stile righe, inserire immagine di sfondo  it

Autor: Marco Z.
Visitado 2158, Followers 1, Compartido 0  

Buongiorno a tutti

Ho inserito una immagine di sfondo nella sezione "stile righe" della mia homepage estesa alla larghezza del browser e con effetto parallasse.

Il problema è che questa immagine non sembra essere responsiva poichè a risoluzioni minori non si riduce ma semplicemente viene tagliata alla dimensione di visualizzazione.

Qualcuno può aiutarmi a risolvere il problema?

grazie

Publicado en
12 RESPUESTAS - 1 CORRECTO
Marco Z.
Marco Z.
User
Autor

Grazie Giuseppe, io però uso la versione 13 e quella funzione non c'è.

Esiste qualche altro sistema con la mia versione?

Leer más
Publicado en de Marco Z.
Giuseppe Guida
Giuseppe Guida
User

Ah, scusa, non avevo visto la versione che utilizzi. Con del codice esterno lo puoi fare ma devi attendere l'aiuto di qualche utente volenteroso che ti dia delle dritte. Ciao

Leer más
Publicado en de Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes ESUsuario del mes PT
Marco Z.
... ... Esiste qualche altro sistema con la mia versione?

... ci sarebbe una mia idea EXTRA, basata sul mio div_custom+iframe+maximage, che dovrebbe risultare compatibile anche con i dispositivi i(!)...

... se ti interessasse, per poter io valutare, posta il link di quella pagina dove hai attuato il parallasse di sfondo riga, per poi passarti le istruzioni che alla fin fine sarebbero un semplice copia/incolla da fare ...

.



Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Marco Z.
Marco Z.
User
Autor
 ‪ KolAsim ‪ ‪
Marco Z.... ... Esiste qualche altro sistema con la mia versione? ... ci sarebbe una mia idea EXTRA, basata sul mio div_custom+iframe+maximage, che dovrebbe risultare compatibile anche con i dispositivi i(!)... ... se ti interessasse, per poter io valutare, posta il link di quella pagina dove hai attuato il parallasse di sfondo riga, per poi passarti le istruzioni che alla fin fine sarebbero un semplice copia/incolla da fare ... .

Ciao KolAsim

è una cosa che uso in tutto il sito su quasi tutte le pagine. Per farti un'idea guarda la home page all'indirizzo www.marcozanoli.it

L'immagine principale è l'immagine di sfondo con effetto parallasse.

Grazie mille

Marco

Leer más
Publicado en de Marco Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes ESUsuario del mes PT

... ho clonato parzialmente la tua pagina, e temporaneamente! in modo che puoi verificare se è come vorresti che fosse su quei dispositivi che hai tu...

... > questo  è l'esempio base con la mia idea e con sfondo maximage, ...come accennato in precedenza:

... > questo  esempio invece è un'altra mia idea, ed è come farei io, sempre con sfondo maximage e ridimensionamento della riga, adatto al caso visto che non contiene altri contenuti...

... in ambedue i sorgenti, il codice da copiare e personalizzare con gli URL relativi è evidenziato e partire dal rigo nr.41...

... la pagina maximage che viene importata nella prima riga della HOME è > questa  ...

... oppure per lo sfondo fisso nel mobile con immagine della prima riga prova con:

#imPageRowGraphics_1 { 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; background-attachment: fixed;
}

... o solo con questo: 

#imPageRowGraphics_1 { background-attachment: fixed;}

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Marco Z.
Marco Z.
User
Autor
 ‪ KolAsim ‪ ‪
... ho clonato parzialmente la tua pagina, e temporaneamente! in modo che puoi verificare se è come vorresti che fosse su quei dispositivi che hai tu... ... > questo  è l'esempio base con la mia idea e con sfondo maximage, ...come accennato in precedenza: ... > questo  esempio invece è un'altra mia idea, ed è come farei io, sempre con sfondo maximage e ridimensionamento della riga, adatto al caso visto che non contiene altri contenuti... ... in ambedue i sorgenti, il codice da copiare e personalizzare con gli URL relativi è evidenziato e partire dal rigo nr.41... ... la pagina maximage che viene importata nella prima riga della HOME è > questa  ... .

Ciao,

la seconda è proprio la soluzione che stavo cercando.

Potresti dirmi quale codice e dove va inserito? non mi è molto chiaro

grazie mille ancora!

Marco

Leer más
Publicado en de Marco Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes ESUsuario del mes PT

... per la struttura comprensiva del loader...

1) ... scarica > questa immagine ed inviala nella ROOT/radice del SITO;

2) ... scarica > questa pagina HTML (maximage) ed inviala nella ROOT/radice del SITO;

3) ... scarica > questo TESTO, lo copi e lo incolli nelle Proprietà della Pagina | Sezione Esperto | Codice personalizzato | selezione: Prima della chiusura di HEAD...

...!... essendo gli esempi in una directory temporanea (trash), penso che avrai tempo sino a domani per scaricare...!...

... quando avrai fatto fallo sapere che andrò a controllare la tua pagina...

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Marco Z.
Marco Z.
User
Autor

grazie mille!

Per utilizzare altre immagini in altre pagine del sito come posso fare?

Nello script posso utilizzare anche un file jpg o deve essere per forza html?

Leer más
Publicado en de Marco Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes ESUsuario del mes PT
Marco Z.
grazie mille! Per utilizzare altre immagini in altre pagine del sito come posso fare? Nello script posso utilizzare anche un file jpg o deve essere per forza html?

... no! ... ... quegli esempi si basavano sulla pagina esterna fatta con maximage; quindi per ogni immagine occorre creare una propria pagina html ...

... per usare solo le immagini, puoi vedere questo altro > CLONE (*) (temporaneo!), altra mia idea esclusiva, nel cui codice basta personalizzare l'URL dell'immagine da usare; ... nel caso, il codice da copiare/incollare lo troverai nel sorgente (Ctrl+U) tra le righe 45<>62 ...

.

(*) - purtroppo non ho il programma!! per provare direttamente sulle sue funzioni, ... altrimenti magari mi sarei inventato qualcosa di diverso e più adatto...

.

bye

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Marco Z.
Marco Z.
User
Autor
[quote=" ‪ ... per usare solo le immagini, puoi vedere questo altro > CLONE (*) (temporaneo!), altra mia idea esclusiva, nel cui codice basta personalizzare l'URL dell'immagine da usare; ... nel caso, il codice da copiare/incollare lo troverai nel sorgente (Ctrl+U) tra le righe 45<>62 ...

Ciao KolAsim, il sistema che mi hai linkato andrebbe benissimo. Ho inserito il codice come mi hai indicato personalizzando il codice per l'immagine e la riga di background (in questo caso la terza)

<style>
#imHeaderObjectsX { position:fixed !important;top:0px !important}
#imPageRow_3 {top: 0px !important; width:100%;background:url('http://www.kolasim-zone.it/loader.gif') no-repeat center top;}
#imPageRowGraphics_3 { background: url('') ;top:-30px;}
</style>
<script>
function h_iframeK(){
var ww =2048; // larghezza immagini;
var hh = 1365; // altezza immagini;
var wdiviframe = document.getElementById('imPageRowGraphics_3').offsetWidth
;
var hiframe=Math.round(wdiviframe*hh/ww);
document.getElementById('imPageRow_3').style.height=hiframe -50 +"px";
document.getElementById('imPageRowGraphics_3').style.height=hiframe - 50 +"px";
divK= "<img  id='immk' src='/images/img_3592-2-bw-desktop-min.jpg' width=100% style='position:absolute;top:0px;'  />";
document.getElementById("imPageRowGraphics_3").innerHTML = divK;}
window.onload = function () {h_iframeK();scrollK() ;}
window.onresize = function () {h_iframeK();scrollK() ;}
</script>

Il risultato va bene quando eseguo il resizing dal browser ma se apro il browser in finestre piu piccole secondo i breakpoint del mio sito l'immagine viene tagliata e non ridimensionata.

Ho sbagliato qualcosa?

Grazie

Leer más
Publicado en de Marco Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes ESUsuario del mes PT
Marco Z.
Il risultato va bene quando eseguo il resizing dal browser ma se apro il browser in finestre piu piccole secondo i breakpoint del mio sito l'immagine viene tagliata e non ridimensionata. Ho sbagliato qualcosa?

... nel clone come vedi funziona; ...mi servirebbe il LINK per poter controllare...

... pero!, ...se l'immagine fosse > questa...è già fatta male di suo; ... prova con un'immagine diversa per un confronto sul risultato; ...controlla anche le misure o il rapporto, che nel clone sono di 3:2 ...

(... comunque, script a parte, vedo che il tuo sito si presenta molto bene così com'è...)

.

ciao

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪