IMÁGENES EN EL TÍTULO DEL POST

Poner una imágen en el título de un post tiene la misma dificultad que ponerla en la cabecera de nuestro blog. En mi plantilla los parámetros de la cabecera están en h1, en otros en header (o header h1), y los del título del post están en h3, que en muchas plantillas está debajo de post (o post h3), aunque bien pueden ser otros. Si probais a copiar los parámetros de h1 en h3 comprobareis que en el título de cada post aparecerá la cabecera de vuestro blog (acordaos de guardar siempre la plantilla antes de hacer esta prueba).

Así está configurado el título de mi post:

.post h3 {
font-size: 150%;
font-weight:bold;
margin: 0px 0px 0px 0px ;
border: 0px solid;

height: ;
text-align: left;
padding:0;
text-transform:uppercase;
background: $sidebarBgColor;
background-image: url (http://blogandroll.googlepages.com/inverno.JPG);
background-position: top center;
background-repeat: no-repeat;
}

Ahora mismo no podeis ver la imagen porque he borrado la parte que está en naranja y colocado la que está en rojo, de tal forma que pone al título el mismo fondo que hay en la sidebar. Si borrase la parte que está en rojo y colocase la parte que está en naranja me quedaría así:

La parte que está en azul permite colocar la imagen a la izquierda, derecha o centrada. Así, si queremos colocarun pequeño icono a la derecha sólo hay que poner la dirección de la imagen y cambiar top center por right. El parámetro que está en verde sirve para que la imagen no se repita más de una vez. Si no le ponemos nada o ponemos repeat ésta se repitirá hasta llenar el hueco destinado al título.

Otras modificaciones que pueden hacerse aquí son: cambiar el tamaño del texto, alinearlo al centro o a cualquiera de los lados, poner borde y eligir el grosor y color del mismo, configurar el ancho (height)...