- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Sovrapposizione immagini background in 2 div diverse
-
Sovrapposizione immagini background in 2 div diverse
Buongiorno,
premetto che sono principiante in css.
Vorrei sovrappore due immagini che sono ciascuna il background di una div:
la prima:#container {background:#D9FFFF url(images/container.png) top right no-repeat; border:5px solid #0067FE; margin:0 auto 20px; padding:5px 20px 20px; width:730px;}
la seconda: ```
#desc {background:#505050 url(images/front3.jpg) bottom left repeat-y; clear:both; color:#fff; /* height:200px; */ margin:5px 0 15px; padding:0 0 5px 0;}l'Html invece è: [HTML]<div id="container"> .... [/HTML] e più lontano: [HTML]<div id="desc">....[/HTML] in cui desc è contenuta in container, come intuibile. Ora vorrei che l'immagine di container si sovrapponesse a quella di desc. Ma non riesco nemmeno a trovare una traccia su come fare.... Grazie in anticipo.
-
Buonasera,
dunque ,
ho trovato una soluzione, secondo me sporca e scomoda, ma funziona.
lascio qui il metodo , se mai fosse utile.Allora :
ho creato una seconda div, di nome "container 2",
e l'ho posizionata all'interiore della div "desc",
cosi:<div id="container"><div id="desc"><div id="container2">...,
con i seguenti valori:#container {background:url(images/container.png) top right no-repeat;
#desc {background:#505050 url(images/front3.jpg) bottom left repeat-y;
#container2 {background:url(images/container.png) top right no-repeat;a questo punto visualizzavo l'immagine "container.png" sovrapposta a quella contenuta nella div"desc" e uguale a quella sullo sfondo del "container" ma non nella stessa posizione. Con l'effetto di aver lo stesso disegno si , ma come un'immagine ripetuta, non un tutt'uno.
Non riuscendo a posizionare l'immagine secondo delle coordinate xy, ho semplicemente creato una seconda immagine ritagliando da container.png la distanza fra l'altezza di "container", l'altezza di "desc" e il margine laterale.per visualizzare l'effetto andate qui:
lupeficara.com/IE/forum/index-esempio.html
-
Buongiorno, vorrei aggiungere che questa soluzione funziona solo con firefox su linux. Insomma abbastanza inutile...