Este efecto lo puedes ver claramente en el menú de páginas de mi blog. Esos circulitos rosas de fondo. Pues bien con este tutorial puedes poner la imagen que quieras.
Necesitas tener lo que es la "base" del fondo, y al igual que
con los fondos de los blogs, ha de ser "seamless". O sea, tienes que
tener en cuenta que se va a repetir. Puedes buscar en google imágenes hasta encontrar el que te guste.
Luego añades en CSS:
.tabs-inner .widget ul {
background: url(URL fondo) repeat-x;
height: 45px;
/*pdb*/
}
Poniendo en el paréntesis la URL de la imagen que vas a usar como
fondo, y cambiando el 45 (altura) por el alto de tu imagen. Para saber la URL de una imagen yo la subo en una entrada borrador, luego pinchas en ella con el botón derecho del ratón y le das a copiar la ruta del enlace. Despúes lo pegas en el paréntesis ese sustituyendo (URL fondo) por lo que hayas copiado.
Si no quieres que se repita (porque no es un patrón seamless o porque te
resulta más fácil diseñarlo así), deberás ponerle también el ancho de
lo que mide (donde dice width).
Lo único que tienes que tener en cuenta que entonces si cambias un día
el ancho del blog, deberás repetirlo, mientras que de la otra manera
puedes cambiarlo y seguiría quedando bien.
Es probable además que debas ajustarlo un poco, moviéndolo hacia
derecha o izquierda. Yo ya he puesto margin-left en el código para
moverlo un poco, pero deberás cambiar el -40 por lo que necesites:
.tabs-inner .widget ul {
background: url() repeat-x;
height: 49px;
width: 943px;
margin-left: -40px;
/*pdb*/
}
Usa el segundo código sólo en caso de que la imagen no sea un patrón seamless. Osea todo el rato el mismo patrón, no se si me entiendes. No es lo mismo un fondo de estampado zebra que la foto de alguien. Espero que con esto me entiendas. El fondo zebra sería un fondo seamless. ok?
Espero que te haya gustado.
Besos,
CÓMO HACER QUE LAS FOTOS DE TU BLOG SE VUELVAN MÁS CLARITAS AL PASAR EL RATÓN POR ENCIMA
