Immagine adattiva in una pagina 
Autor: Lorenzo S.
Visitado 950,
Seguidores 1,
Compartilhado 0
Ciao a tutti volevo chiedervi una cosa, avendo avuto la necessità di togliere la slideshow dell'intestazione di alcune pagine tramite questo codice:
<style type="text/css">
#imHeader {display: none;}
</style>
ora in quelle pagine vorrei aggiungere 1 immagine di un 100naio di pixel come altezza che sia adattata allo schermo per sostituire quello che prima era la slideshow.
Sapete come posso fare?
Publicado em
prova a mettere questo nella proprietà della pagina interessata:
<style>#imHeader {height: 100px; background-color: transparent; background-image: url('files/immagine.jpg');</style>
cambiando l'immagine con la tua....
Autor
ciao Mirko ti ringrazio per la risposta, però non capisco una cosa:
allora in una pagina a caso inserisco un html e aggiungo la foto mettiamo che si chiami "immagine22.jpg" come persorso "files"
Vado in proprietà della pagina dove mi interessa cambiare l'ntestazione inserisco prima della chiusura del tasto Head:
<style type="text/css">
#imHeader {display: none;}
</style>
<style>#imHeader {height: 100px; background-color: transparent; background-image: url('files/immagine22.jpg');</style>
Dov'è che sbaglio?
questo non serve...#imHeader {display: none;}
Autor
devo compilarlo così:
<style type="text/css">
#imHeader {height: 100px; background-color: transparent; background-image: url('files/immagine22.jpg');
</style>
o così:
<style>
#imHeader {height: 100px; background-color: transparent; background-image: url('files/immagine22.jpg');
</style>
stessa cosa...
Autor
purtroppo si carica l'intestazione originale sopra, inoltre la larghezza dell'immagine al posto di essere adattata allo schermo ha la larghezza del "contenuto della pagina"
un link per vedere...?
al limite prova anche questo, con un immagine di 1600 di larghezza....
<style>
#imHeaderBg {background-image: url ('files/immagine22.jpg');background-position: left top; }
</style>
Autor
Al momento il sito di prova ce l'ho solo il locale, lo pubblico su altervista e poi metto il link.
prova questa all'interno del tag body, in proprietà pagina...
<div style="position: absolute; top: 200px; left: 0px; width: 100%; height: 150px; overflow: hidden;"><img src="files/imagine.jpg" width="100%"></div>
cambia le misure del top, come serve a te....
Autor
ho provato ad inserire prima della chiusura del tag body solo che purtroppo esce una riga grigia di 1px da parte a parte e comunque rimane l'intestazione.
Mi sa che è più complesso di quello che avevo previsto
Tuttavia per quanto riguarda la mia ultima domanda sai darmi un consiglio?
"se volessi dal "punto 3" inserire un'immagine e che si adattasse con questi 100px di altezza sempre adattata alla pagina e non solo alle dimensioni del "contenuto della pagina" come dovrei fare?"
l'ultimo che ti ho detto lo ho usato io qui....
http://www.provews.altervista.org/div_sfondo/
scusa....tag head....comunque guarda il mio codice....
anzi era un'altro...prova questo della mia prova:
<div style="background: url('files/frec1.png')no-repeat center center; position:absolute; right:0px; width:100%; top:-20px; height:500px;"></div>
Autor
il codice funziona per il discorso intestazione però rimane ancora la questione che l'intestazione vecchia rimane...
Detto questo invece per quanto riguarda il punto:
"se volessi dal "punto 3" inserire un'immagine e che si adattasse con questi 100px di altezza sempre adattata alla pagina e non solo alle dimensioni del "contenuto della pagina" come dovrei fare?"
quest'ultimo codice come lo metto?
Autor
questa è la prova tralasciando le immagini utilizzate sull'intestazione
http://sitoprovajoomla123.altervista.org/
Ora mi chiedo, anche vedendo la sorgente della pagina qui: http://www.provews.altervista.org/div_sfondo/ non riesco a capire come tu oltre all'intestazione abbia fatto mettere le immagini durante il testo, di sicuro sono state fatte al "punto 3" adesso il problema è:
che devo fare per metterle?
ho fatto una prova al "punto 3" che troverai nella "pagina1" come vedi non si è adattata alla pagina