Ciao, ti converrebbe usare uno dei generatori di sprites on line, che ti forniscono anche le posizioni per le immagini di sfondo nel css.
E poi, forse, ricomporre l'immagine in modo che sia più facile l'inserimento degli sfondi.
Nel mio esempio ho utilizzato l'immagine che allego, rifatta sulla tua (nota che essendo lo sfondo sotto al link allineato in basso ho inserito un padding-bottom a h2 pari all'altezza dello sfondo stesso, non sapendo invece come vadano gli altri sfondi li trovi in un semplice div)
codice:
<style type="text/css">
<!--
/* imposto lo sfondo e la ripetizione su tutti gli elementi che usano lo sprite */
#uno, #due, #tre, #quattro{
background: url(sprites.png) no-repeat;
}
/* h2,.voci-menu-2,.voci-menu-3,.voci-menu-1 */
#uno{
background-position: left bottom ;
width: 500px;
padding-bottom: 11px;
}
/* bordo alto*/
#due{
background-position: 0 0;
width: 202px;
height: 10px;
}
/* icona tonda */
#tre{
background-position: right top;
width: 40px;
height: 39px;
}
/* freccetta */
#quattro{
background-position: -250px 0;
width: 5px;
height: 8px;
-->
</style>
</head>
<body>
<h2 id="uno">contatti</h2>
<p id="due"> </p>
<p id="tre"> </p>
<p id="quattro"> </p>
</body>
</html>
Rispondi quotando
