Imagen o color de fondo en el título del post y de la sidebar

Me consulta Mente Solitaria sobre como poner un fondo de color en el título de sus post, como ya tenía un post en "borradores" sobre el tema, no me ha costado mucho "retocarlo" un poco...

Para poner la imagen como fondo del titulo de las entradas del blog, buscamos esto en el CSS de nuestra plantilla:

.post h3 {

Justo debajo, añadimos esto:

background-image: url(DIRECCION (URL) DE LA IMAGEN);
border: 0px #FFFFFF; height: 30px;

Yo tengo border: 0px, si queremos que la imagen se vea bordeada cambiamos el cero por el número que queramos, a mayor número, borde más grueso.
He puesto height: 30px, que marca el alto de la imagen, si no ponemos nada la imagen se adaptará al alto del título que, para mi gusto queda estrecha...
Si cambiamos el 30 por un número mayor, la imagen se verá más ancha y viceversa.
Fijaros que el color que he puesto para el borde es ffffff, o lo que es lo mismo, blanco, si usamos la imagen con borde podemos cambiarle el color por el que nos guste.

Para poner una imagen en el título de la sidebar, buscamos esto en el CSS de nuestra plantilla:

.sidebar h2 {

Aquí he de aclarar que haciendo las pruebas en una de mis plantillas (Mínima), me encontré con que el .sidebar h2 { no aparecía por ningún lado, así que se me ocurrió añadirlo directamente, y funcionó. :-)
Lo añadí en la zona de /* Sidebar Content */ que es donde en la Mínima están las otras propiedades de la sidebar.

Después de .sidebar h2 }, añadimos lo mismo que para el título de las entradas, es decir, esto:

background-image: url(DIRECCION (URL) DE LA IMAGEN);
border: 0px #FFFFFF; height: 30px;

Los cambios que se pueden hacer son los mismos que en la imagen del título de las entradas.

Lo he probado en cuatro plantillas distintas y el resultado ha sido óptimo.
Si la imagen es más pequeña que el ancho de las entradas o la sidebar, esta se repetirá automáticamente hasta conseguir la medida adecuada, para evitarlo he utilizado una imagen del ancho de las entradas más o menos.


Si lo que queremos es simplemente darle un fondo de color a los títulos, haremos prácticamente lo mismo, pero el código que debemos añadir es este:

background:#0033FF;

He puesto en el ejemplo un tono de color azul, pero podemos cambiarlo por el que mejor quede con el blog.
En WebTaller podéis consultar una tabla de colores con sus respectivos códigos.