Cómo sorprender a todos los suscriptores con una imagen de fondo de correo electrónico fácilmente (¡+ el código para hacerlo!)

Aquí, la imagen se hace para ajustarse al ancho y alto de la celda al incluir background-size: cover en los estilos CSS en línea y luego se coloca en el centro. Agregar estos estilos le permite usar una imagen de 2x, lo que significa que verá un renderizado nítido en las pantallas Retina, y se cambiará de tamaño para que se ajuste perfectamente a su contenedor, incluso cuando el contenedor cambie de tamaño para renderizarlo en diferentes dispositivos.

Sin embargo, esto también significa que si su imagen es demasiado pequeña o no tiene un tamaño proporcional al contenedor, puede verse pixelada o estirada. Especialmente si es fotografía.

¿Funciona tu imagen de fondo? Vea cómo funciona nuestro código para imágenes de fondo en su propio correo electrónico en las aplicaciones de correo electrónico más populares, como Gmail y Outlook. Más información →

Hoy en día, la mayoría de los clientes de correo electrónico admiten el estilo de fondo CSS en línea, por lo que puede agregar su imagen de fondo y color de respaldo utilizando la propiedad CSS abreviada de fondo. En otras palabras, simplemente aplíquelos al estilo de "fondo". Desafortunadamente, el estilo de fondo adicional no funciona muy bien con la taquigrafía al codificar en línea, por lo que cualquier posicionamiento o tamaño debería escribirse como estilos separados. Por ejemplo, usando background-position: center; tamaño de fondo: 80%; en lugar de fondo: centro / 80%; .

Hacer que esto funcione en Outlook con un respaldo de VML

Outlook y Office 365 para escritorio también necesitan un poco de ayuda para mostrar imágenes de fondo, ya que tampoco representan estilos de fondo CSS. Para que nuestra imagen de fondo se muestre en estos clientes de correo electrónico, debemos aprovechar una técnica popularizada por Stig Morten Myre para Campaign Monitor y aplicar el lenguaje de marcado de vectores de Microsoft (VML).

Tomando el código que ya hemos creado, colocamos el VML requerido y un <div> que lo contiene dentro de la celda de nuestra tabla:

Para las imágenes que necesitan llenar el contenedor sin repetirse, necesitamos usar 'frame' dentro de la etiqueta vml: fill. De esta manera, puede usar imágenes 2x dentro de esta etiqueta. Solo asegúrese de establecer el ancho de su contenedor usando un estilo en línea en la etiqueta v: rect (en el ejemplo anterior, está configurado en 600px).

Si desea relleno en su contenedor, algo que puede encontrar es que colocar el VML dentro del contenedor hará que el relleno colapse. La forma en que arreglamos esto es envolver el VML alrededor de nuestro contenedor, por lo que necesitamos anidar nuestro contenedor dentro de otra tabla así:

Imagen de fondo repetida

También puede agregar un fondo que se repita dentro del contenedor en el que lo coloca. Un gran ejemplo es repetir un patrón en todo el cuerpo de su correo electrónico.

Si la imagen que colocamos en nuestra celda contenedor es más pequeña que el contenedor, automáticamente se repetirá tanto horizontal como verticalmente. Para repetir en una sola dirección, aplique estilo con CSS 'background-repeat' y agregue el valor repeat-x para repetir horizontalmente o repeat-y para repetir verticalmente.

Para llenar todo el contenedor con un patrón que se repite completamente, el código es muy simple:

Hacer que esto funcione en Outlook con un respaldo de VML

Nuevamente, si desea ver su renderizado en segundo plano en los clientes de Outlook, puede aplicar VML. El código es un poco diferente esta vez, con el VML colocado antes del contenedor:

Para hacer que el fondo se repita, complete la etiqueta v: fill con el tipo 'mosaico'. No es de extrañar, hay algunos problemas de renderizado con Windows 10 Mail, y con fondos repetidos, los problemas de renderizado pueden ser mucho más desagradables. Por lo tanto, omitir el VML podría ser el enfoque más seguro si tiene suscriptores de Windows 10 Mail.

Técnicas avanzadas

Las imágenes de fondo fijas y repetidas ofrecen muchas oportunidades para subir de nivel los diseños de sus correos electrónicos, pero hay más:

Intercambio de imagen de contraste

Ahora que el modo oscuro está disponible en varios clientes de correo electrónico, y respetar las preferencias de los suscriptores lo ayuda a llegar a una audiencia más amplia y generar confianza, cambiar su imagen de fondo es una excelente manera de complementar un diseño de modo claro u oscuro. Y también es una mejora divertida y sencilla.

Para implementar esto, debe agregar CSS incrustado a las consultas de medios del modo oscuro. Esto asegurará que su imagen de fondo del modo oscuro se sirva dentro de los clientes de correo electrónico que admitirán este tipo de consulta de medios:

Vale la pena agregar un color alternativo oscuro. Esto ayudará con los clientes de correo electrónico que no cargan imágenes sin que el lector tome medidas y garantiza que su mensaje se pueda leer cuando su imagen no se haya cargado.

Ahora, en su HTML, aplique su clase a la celda que contiene su imagen de fondo en modo claro. ¡Sencillo!

Toma nota : algo que es difícil de diseñar, e incluso más difícil de codificar, son los clientes de correo electrónico que invierten los colores de tu correo electrónico en un entorno de modo oscuro, pasando por alto por completo todo el trabajo duro que dedicas a escribir consultas de medios en modo oscuro.

Es casi imposible conseguir que estos clientes de correo electrónico estén disponibles. Sin embargo, puede jugar con imágenes de fondo que tengan un nivel de transparencia y aplicar un color de fondo de alto contraste a su contenedor, como blanco para el modo claro y negro para el modo oscuro. Esto permitirá invertir el color de fondo. Intenté esto con el siguiente ejemplo:

Mi imagen de fondo de chevron tiene una opacidad del 30% en las flechas y es completamente transparente entre ellas. Esto significa que cuando los clientes de correo electrónico infractores toman el control de mi renderizado en modo oscuro, el contenido es legible.

Para obtener más información sobre la codificación para el modo oscuro y el soporte del cliente de correo electrónico, consulte nuestra Guía definitiva para el correo electrónico en modo oscuro.

Fondo interactivo

¿Qué tal deleitar a los suscriptores con algo de interactividad? Puede difundir un poco de alegría con un simple efecto de desplazamiento o desplazamiento, cambiando el fondo de su contenedor a medida que el lector mueve el cursor sobre su contenido.

Necesita un poco de CSS incrustado para que este funcione. Coloque esto dentro de su etiqueta <style>:

Ahora todo lo que necesita hacer es aplicar esta clase a la celda de su tabla, así:

Sube de nivel tus diseños

Con una gran cantidad de oportunidades, el uso de imágenes de fondo para mejorar los diseños de sus correos electrónicos es una excelente manera de ir más allá y hacer que sus correos electrónicos se destaquen entre la multitud. Para ayudarlo a poner en práctica estas técnicas, hemos creado un recurso útil donde puede obtener el código que se muestra en esta publicación.

Nos encantaría ver cómo utiliza las imágenes de fondo en sus correos electrónicos. Comparta sus ejemplos en los comentarios a continuación.

Asegúrese de que sus imágenes de fondo funcionen con Litmus ¿Funcionó? Obtenga una vista previa de sus imágenes de fondo (y el resto de su correo electrónico) en más de 100 clientes de correo electrónico, aplicaciones y dispositivos con Litmus. Y saluda a los correos electrónicos de marca y sin errores. Inicie su prueba gratuita →

Publicado originalmente el 24 de mayo de 2019 por Jason Rodríguez. Última actualización el 21 de julio de 2021.