Seasons Greetings es mapa de bits. Es decir, todo el fondo es mapa de bits. Y los botones sociales son también imágenes pero por separado (no Sprite CSS). He creado un div especificando el fondo y ahora quiero que los botones estén sobre la imagen, bajo Seasons Greetings.
Para que lo entiendas mejor, aquí te dejo el código:
Código HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
/* FONDO */
#fondo {
background: url(seasons.png);
height: 500px;
width: 900px;
}
/* FIN FONDO */
/* ENLACES */
#enlaces li {
display: inline-block;
margin-right: 5px;
}
#facebook a:hover {
box-shadow: 0px 0px 10px yellow;
-webkit-box-shadow: 0px 0px 10px yellow;
-moz-box-shadow: 0px 0px 10px yellow;
-o-box-shadow: 0px 0px 10px yellow;
}
#twitter a:hover {
box-shadow: 0px 0px 10px yellow;
-webkit-box-shadow: 0px 0px 10px yellow;
-moz-box-shadow: 0px 0px 10px yellow;
-o-box-shadow: 0px 0px 10px yellow;
}
#report a {
font-weight: bold;
color: white;
font-family: Arial;
text-decoration: none;
background: none;
}
#report a:hover {
text-shadow: 0px 0px 10px #33CCFF;
}
/* FIN ENLACES */
</style>
</head>
<body>
<div id="fondo">
<ul id="enlaces">
<li id="facebook"><a href="http://www.facebook.com/pages/The-AIRE-Centre/44633529942"><img src="facebook.png"></img></a></li>
<li id="twitter"><a href="#"><img src="twitter.png"></img></a></li>
<li id="report"><a href="report.pdf">Annual Report 2012</a></li>
</ul>
</div>
</body>
</html>