CSS. Un fondo para los títulos de las entradas

Vamos a aprender a poner un fondo en los títulos de las entradas del blog. Para ello tenemos que hacer varias cosas: averiguar qué etiqueta HTML usan, <h3>, subir la imagen que previamente hayamos preparado y por último insertar el CSS en el tema utilizado.

Para subir la imagen al blog creamos una entrada y la insertamos.

Vamos a nuestro blog, pulsamos sobre la imagen y después con el botón derecho le damos a 'ver imagen' y copiamos la URL de la misma.

A continuación en Blogger vamos a 'Tema' -> 'Personalizar' ->'Avanzado' -> 'Añadir CSS' y añadimos el siguente código:

  h3 {
     background-image:url("aquí la url de la foto");
  }

Otros ejemplos

En este ejemplo tenemos un fondo que tiene mucho contraste y queremos evitar que el título de la entrada quede encima de las teclas, así que con padding-left añadimos espacio a la izquierda:

  h3 {
     background-image:url("aquí la url de la foto");

     padding-left:100px;
 }

En este otro ejemplo nos hemos quedado cortos. Además de desplazar el texto usando padding, añadimos el color de fondo que coincide con el color de fondo de la imagen e indicamos que no repita el fondo:

  h3 {
     padding-left:100px;
     background-image:url("url de la imagen");
     background-repeat:no-repeat;
     background-color:black;
  }

Tamaño de la imagen:

podemos ir a personalizar tema ->'Ajustar ancho' para ver el ancho de nuestro blog y el ancho que hemos dedicado a los artículos