ciao ragazzi... e ragazze!!
sono qui con una buona notizia e una richiesta di aiuto.
ho visto che le richieste per "creare" uno sfondo fluido sono molto frequenti e che le soluzioni adottate si appoggiano sempre (correggetemi se sbaglio) a degli script che molto spesso bisticciano con gli altri script di joomla.
vorrei perciò condividere col forum un metodo per adattere lo sfondo allo schermo usando solo css.
veniamo al dunque.
si tratta di utilizzare 3 "livelli":
-il primo per eliminare ogni padding e margin e impostare widht e height al 100%.
-il secondo conterrà l'immagine di sfondo
-il terzo per il body
in index.php aggiungiammo questo:
<body>
<div><img id="bg_image" src="/path/to/image.png"/></div>
<div id="scrollable">
...........
</div>
</body>e nel css andiamo ad aggiungere queste regole:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#bg_image {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
#scrollable {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
questo sarà il risultato: comunanzacoste.it/
ovviamente dovremo togliere il "vecchio" background caricato dal css che altrimenti si andrà a sovrapporre a quello fluido
questa era la buona notizia, ora la richiesta di aiuto....
a causa dei differenti tipi di schermi in circolazione (4:3, 16:9, wide ecc..) si hanno diverse visualizzazioni con conseguenti "deformazioni" dell'immagine, quindi ho pensato di far si che l'immagine si adatti solo in altezza allo schermo e mantenga le giuste proporzioni in larghezza modificando in questo modo:
#bg_image {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: auto; <<<<
height: 100%; il solo problema che rimane è che l'immagine rimane ancorata in alto a sx, certo direte, c'è "top:0; left:0;", ma ho provato con tutte le regole di posizionamento che conosco e non sono riuscito a centrare lo sfondo in orizzontale.
qualcuno potrebbe darci un'occhiata??
PS: scusate il post kilometrico
