Stile righe, inserire immagine di sfondo 
Author: Marco Z.
Visited 2099,
Followers 1,
Shared 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
Posted on the
Non è responsive l'immagine in stile righe... Puoi provare ad ottenere un risultato migliore con la nuova funzione "profondità" inserita in Stile righe...
Leggi qui se può chiarirti le idee:
https://helpcenter.websitex5.com/en/post/183173
https://helpcenter.websitex5.com/en/post/179067
Author
Grazie Giuseppe, io però uso la versione 13 e quella funzione non c'è.
Esiste qualche altro sistema con la mia versione?
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
... 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 ...
.
Author
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
... 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;}
.
Author
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
... 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...
.
Author
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
.
Author
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
... 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
.