Ciao a tutti,
ho cominciato da poco a sviluppare questa pagina e il cliente vorrebbe in home page un immagine che occupi tutto lo schermo, fin qui tutto ok, sapevo che esisteva il modo e ho settato al body che ha classe front le caratteristiche e funziona correttamente su computer e tablet ma non so mobile, tra l'altro con la simulazione di chrome appare corretto ma quando lo apro da un cellulare reale no.
Questo è il css settato
body.front {
background: url('../img/old-train.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}Questa è invece la pagina
Qualcuno ha idea dove sia l'errore?
Grazie
hai usato bootstrap come tema e allora aggiungi la classe img-responsive per farla vedere su tutti i dispositivi
http://www.w3schools.com/bootstrap/bootstrap_images.asp
Ciao,
essendo l'immagine associata al body come faccio ad aggiungere la classe img-responsive
<body <?php print $body_attributes; ?>><div id="skip-link">
<a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
</div>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
Ho provato ad scrivere dentro class ma non funziona, ho poi visto un modulo che dovrebbbe permettere di aggiungere classi al body ma non funziona ancora, puoi darmi delle dritte gentilmente.
Grazie
.img-responsive non ha senso in questo caso visto che applica ad al tag img.
Prova ad aggiungere min-height: 100%; a body.front dopo l'ultimo background-size
Dovrebbe essere così:
body.front {background: url('../img/old-train.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%
}
Ciao,
ho provato ma non funziona ancora, la cosa strana è che il simulatore di chrome continua a farlo vedere correttamente e il css che ho trovato lo avevo visto su questo link che funziona perfettamente.
http://startbootstrap.com/template-overviews/the-big-picture/
Probabilmente c'è un errore stupido da qualche parte ma non riesco a trovarlo.
Prova a dare un occhio qui che si riferisce proprio a Bootstrap: http://codepen.io/j_holtslander/pen/RPOJVj
A quanto pare la soluzione è quella di impostare
background-attachment: fixed;solo dalla versione desktop in poi (da 900px in poi più o meno).Quindi dovresti la tua prima dichiarazione dovrebbe essere così:
body.front {background: url('../img/old-train.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%
}
mentre nel breackpoint della versione desktop
body.front {
background-attachment: fixed;
}
guarda qui
http://stackoverflow.com/questions/24721935/full-screen-responsive-backg...
Ciao,
ho provato ad impostare quella soluzione ma non funziona su cellulare, di fatto nel link messo da motocad anche un utente risponde dicendo che su android non funziona correttamente.
Non riesco proprio a capire il perchè..
io ho usato una media query modificando i seguenti valori:
background: url('../img/old-train.jpg') no-repeat center center;
background-color: #38463B;
in questo modo la tua immagine prende le sembianze di una testata, si vede tutta e non si streccia.
ciao,
grazie per l'idea ma graficamente non mi piace molto, non capisco come non funzioni quando nel link http://startbootstrap.com/template-overviews/the-big-picture/ funziona correttamente e anche il simulatore di chrome ( che so essere non attendibile su molte cose) me lo mostra perfetto.
Se avete altre idee o notate miei errori nei codici ci cui ho fatto modifiche per trovare una soluzione ve ne sarei grato.
Saluto