Cómo agregar una imagen de fondo de correo electrónico HTML a su correo electrónico (ejemplos de código incluidos)

Los correos electrónicos no se tratan solo del contenido y lo que aporta al destinatario. También se trata del diseño y de las emociones que evoca en su audiencia. Las imágenes de fondo en los correos electrónicos son una de las formas más comunes de crear un estilo único para su boletín, rápido y fácil. Este artículo trata sobre ellos. Le mostraremos cómo crear una imagen de fondo HTML  para su plantilla de correo electrónico, incluyendo cada fragmento de código que necesitará. Además de eso, cubriremos cómo puede tomar atajos en su proceso de creación y agregar imágenes de fondo sin codificar usando Stripo.

¿Qué es la imagen de fondo?

En primer lugar, averigüemos qué  es realmente una imagen de fondo. En esencia, estas imágenes se aplican detrás del contenido principal del correo electrónico, sirviendo como una bandeja en la que puede colocar el resto del contenido de su correo electrónico (textos, otras imágenes, banners, carruseles y más). Suena bastante simple, y en realidad lo es.

¿Por qué los necesita?

Como la imagen de fondo suena simple y, hasta cierto punto, una forma "de la vieja escuela" de diseñar sus correos electrónicos, ¿por qué molestarse con ellos? 

Tenemos tres beneficios distintivos por los que debería considerar el uso de imágenes de fondo al crear su propio boletín:

• el principal beneficio de una imagen de fondo es que puede colocar contenido HTML adicional sobre ella, mientras que en otros escenarios, este espacio de contenido estará ocupado con otro contenido (puede elegir entre una imagen de fondo y texto, o solo una imagen prefabricada con el texto ya en ella, por ejemplo);
• el texto sobre una imagen de fondo (a diferencia de una imagen plana con texto ya en ella) se puede leer incluso si las imágenes están desactivadas (algunos destinatarios aún pueden desactivar la visualización de imágenes debido a una conexión a Internet limitada o débil);
• el uso de imágenes de fondo le brinda más oportunidades para diseñar correos electrónicos únicos y resaltar su marca mezclando y combinando fondos y varios contenidos sobre ellos.

Como puede ver, tiene un conjunto bastante sólido de beneficios que pueden hacer que su proceso de diseño de correo electrónico sea más diverso en términos de cómo puede crear el aspecto de su correo electrónico.

Cosas que debe saber antes de agregar las imágenes de fondo a su correo electrónico HTML

Antes de aplicar cualquier imagen de fondo a su correo electrónico, debe asegurarse de que se ajuste a su diseño. A medida que intercambia y agrega imágenes de fondo y contenido, algunas pueden verse bien, mientras que otras pueden hacer que sus ojos se derritan. Y las razones de eso son de las que hablaremos ahora.

Relación de contraste

Lo primero en lo que debe pensar al agregar una imagen de fondo a su correo electrónico es el contraste. El contraste en el diseño del correo electrónico es la diferencia de color, tamaño y otros elementos visuales entre las diferentes partes del correo electrónico que crea una jerarquía y mejora la legibilidad.

Es muy importante para la legibilidad general del correo electrónico que coincida con los colores correctos de su imagen de fondo y el contenido que hay encima.

Al crear una imagen de fondo y contenido encima, vale la pena seguir lasl pautas de accesibilidad al contenido web (WCAG). Es un conjunto de estándares técnicos reconocidos internacionalmente para hacer que los sitios web y el contenido digital sean accesibles para las personas con discapacidades. Si adapta su imagen de fondo y contenido a estas pautas, cualquier persona de la audiencia podrá leer sus correos electrónicos.

Para facilitar el proceso de diseño, todas las combinaciones de colores que utilice se pueden consultar aquí.

Aspecto general y simplicidad

Los colores y cómo combinan son importantes, pero no se olvides del diseño general y de cómo se ve su fondo en combinación con su contenido. Siempre tenga en cuenta la densidad general del fondo. Si hay demasiados detalles, no importa cuán bien elegidos estén los colores, el texto será extremadamente difícil de leer. "Cuantos más, mejor" no es el caso aquí.

Versión alternativa

Por último, pero no menos importante, está la versión alternativa. No todos los clientes de correo electrónico admiten imágenes de fondo; Como resultado, es posible que su fondo no se muestre en absoluto. Por lo tanto, al codificar, debe asegurarse de que haya una versión alternativa disponible que se mostrará si el correo electrónico se abre para clientes de correo electrónico que pueden no mostrar imágenes de fondo. En su lugar, puede crear un color alternativo para su fondo.

Cómo codificar la imagen de fondo de su correo electrónico HTML

Ahora, vayamos a la parte principal de nuestra guía, es decir, crear su imagen de fondo desde cero. Lo guiaremos a través de todo el proceso paso a paso y le explicaremos todos los matices que debe saber al codificar imágenes de fondo en correos electrónicos. Al final de esta guía, tendrá un ejemplo de un correo electrónico muy básico con una imagen de fondo y un texto encima que se verá así:

Usaremos un ejemplo de código que puede pegar en su propio correo electrónico más adelante.

Estructura HTML básica

En primer lugar, debemos sentar las bases para nuestro correo electrónico con una imagen de fondo. El código se verá así:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
</html>
 

Tiene dos partes principales que son una piedra angular de nuestra imagen, con una imagen de fondo. La primera es la  parte <style></style> que contendrá el código para los estilos de correo electrónico y también nuestra imagen de fondo. El segundo es <body></body> donde debemos colocar nuestro contenido que estará encima de la imagen de fondo de correo electrónico.

Agregar estructura de tabla para compatibilidad

El siguiente paso es agregar una celda de tabla para nuestro correo electrónico. Dado que muchos clientes de correo electrónico (especialmente los más antiguos) dependen de tablas para el diseño, usaremos una estructura de tabla para garantizar que el correo electrónico se represente bien en todos los dispositivos.

Copie este código y péguelo en la parte <body></body>.

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table role="presentation" width="600" cellspacing="0" cellpadding="0" align="center">
                <!-- Email content will go here -->
            </table>
        </td>
    </tr>
</table>
 

Colocamos esta parte de código aquí ya que la sección <body> contiene contenido visible que se representa en el correo electrónico. Este código tiene dos tablas, básicamente una externa y otra interna:

• tabla externa con ancho="100%" garantiza que el diseño pueda adaptarse a varios tamaños de pantalla;
• tabla interna con ancho="600" contiene el contenido real del correo electrónico y está centrado para crear un aspecto limpio y profesional que funciona en diferentes dispositivos y clientes de correo electrónico.

Creación de una base para la imagen de fondo

Una vez tratada la estructura de la tabla, necesitamos crear un "envoltorio" para nuestra futura imagen de fondo. En esencia, crearemos un div dentro de la tabla interna que contendrá la imagen de fondo. Es una parte importante, ya que creamos un contenedor dedicado para nuestra imagen de fondo y damos una separación clara entre el contenido y nuestra imagen de fondo.

Además de eso, el código de estilos que agregaremos más adelante podrá cambiar la forma en que el contenido y el fondo se ven por separado, lo cual es vital para capacidades de diseño de correo electrónico más amplias.

Tome este código:

<td class="email-body">
    <div class="content">
        <h1>Background Image and Text</h1>
        <p>You can place your own background and content here.</p>
    </div>
</td>
 

Y pégelo aquí:

Como resultado, hemos creado contenido básico arriba en forma de texto simple que estará encima de nuestra imagen de fondo.

Agregar código CSS de imagen de fondo

Ahora, pasemos a la parte principal, específicamente, hacer que la imagen de fondo aparezca como debería. Dentro de la etiqueta <style> en el <head>, agregaremos CSS para la clase .email-body para configurar la imagen de fondo y asegurarnos de que se vea bien en diferentes clientes de correo electrónico.

Para dar vida a su imagen de fondo, reemplace <style></style> con este código:

<style>
    body {
        margin: 0;
        padding: 0;
    }
    .email-body {
        background-image: url('https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        display: block;
    }
    .content {
        padding: 20px;
        color: white;  /* Change text color to ensure readability */
        font-family: Arial, sans-serif;
    }
</style>
 

Nuestra imagen de fondo se coloca en el correo electrónico a través de un enlace URL, que puede reemplazar aquí.

Con este código, tiene varias opciones que pueden cambiar el aspecto de su imagen de fondo y el contenido en la parte superior. Analicemos cada uno, para que tenga una mejor comprensión de lo que realmente puede cambiar aquí:

• margin: 0 elimina cualquier margen predeterminado alrededor del cuerpo del documento. De forma predeterminada, los navegadores suelen aplicar un pequeño margen alrededor de los bordes de la página. Establecerlo en 0 garantiza que no haya espacios no deseados en los bordes exteriores del correo electrónico;
• padding: 0 es bastante similar al anterior, pero elimina cualquier relleno predeterminado dentro del cuerpo. El relleno es el espacio entre el contenido y el borde de un elemento. Establecerlo en 0 asegura que el contenido comience en el borde del cuerpo sin espacio adicional;
• background-image es una cosa clave aquí y define la imagen de fondo para el elemento;
• background-repeat: no-repeat evita que la imagen se repita, asegurando que solo se muestre una vez, incluso si no llena toda el área;
• background-size: cover controla cómo  se escala la imagen de fondo, y cover garantiza que la imagen cubra toda el área del elemento, incluso si eso significa que podría recortarse (en términos simples, mantiene su relación de aspecto mientras llena el área, evitando huecos);
• background-position: center es necesario para centrar la imagen de fondo dentro del elemento;
• width: 100% establece el ancho del elemento .email-body y garantiza que la imagen de fondo abarque todo el ancho del correo electrónico;
• height: 100% establece la altura del elemento .email-body al 100% de su contenedor principal, lo que hace que el elemento llene el espacio vertical disponible;
• padding: 20px crea un espacio de 20px en todos los lados entre el contenido y los bordes del contenedor .content;
• color: white cambia el color del texto dentro del elemento .content a blanco. Es particularmente importante cuando hay una imagen de fondo que podría ser oscura, asegurando que el texto sea legible y se destaque claramente;
• font-family: Arial, sans-serif establece la familia de fuentes para el texto en Arial.

Adición de una pieza de reserva

Ahora, terminemos nuestro código de imagen de fondo con la información importante de que los clientes de correo electrónico no pueden cargar imágenes establecidas en el fondo del correo electrónico.

Copie este código y péguelo entre </style> y </head>:

<!--[if mso]>
    <style>
        .email-body {
            background: #f0f0f0; /* Fallback color for Outlook */
        }
    </style>
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
        <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" />
    </v:background>
<![endif]-->
 

El código de reserva es relativamente simple aquí, pero analicemos brevemente lo que hace:

• background: #f0f0f0 es el color de fondo alternativo que puede cambiar al color de reserva sólido que necesita;
• <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true"> es un elemento VML (lenguaje de marcado vectorial) utilizado por Outlook para representar imágenes de fondo;
• <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" /> define la imagen de fondo que se utilizará en Outlook, por lo que si necesita cambiarla, simplemente reemplace el enlace a su propia imagen;
• <!-- [si mso]> ... <! [endif]--> es un bloque especial para Outlook, lo que garantiza que Outlook pueda representar la imagen de fondo usando VML, mientras que otros clientes de correo electrónico ignoran esta parte.

Código completo

Y eso es todo. El código de  correo electrónico de su imagen de fondo está listo. Dejaremos un ejemplo de código completo  para que pueda verificar si hizo todo bien mientras recorre nuestra guía.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .email-body {
            background-image: url('https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100%;
            display: block;
        }
        .content {
            padding: 20px;
            color: white;  /* Change text color to ensure readability */
            font-family: Arial, sans-serif;
        }
    </style>
    <!-- Outlook background image fallback -->
    <!--[if mso]>
        <style>
            .email-body {
                background: #f0f0f0; /* Fallback color for Outlook */
            }
        </style>
        <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
            <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" type="tile" />
        </v:background>
    <![endif]-->
</head>
<body>
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <table role="presentation" width="600" cellspacing="0" cellpadding="0" align="center">
                    <tr>
                        <td class="email-body">
                            <div class="content">
                                <h1>Background Image and Text</h1>
                                <p>You can place your own background and content here.</p>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
 

Cómo agregar una imagen de fondo a su correo electrónico en Stripo

Saber cómo funciona el código de la imagen de fondo de su correo electrónico de arriba a abajo es genial. Pero, ¿qué pasa si no tiene tiempo para aprenderlo o no tiene ninguna experiencia con el código? Ahí es donde entra en juego Stripo. Aquí hay una breve guía sobre cómo puede agregar una imagen de fondo en nuestro editor sin escribir una sola línea de código.

Mostraremos cómo funciona todo usando nuestra estructura de correo electrónico básica predeterminada que se ve así:

Abrir la configuración de Estilos

Haga clic en la estructura en la que desea colocar su imagen de fondo y luego haga clic en la pestaña Estilos.

Activar la opción de imagen de fondo

Para comenzar a configurar su imagen de fondo, haga clic en el interruptor con el mismo nombre.

Elige una forma de agregar su imagen de fondo

Una vez que haga clic en el interruptor Imagen de fondo, verá una ventana con varias opciones para agregar una imagen. Analicemos cada uno brevemente:

• puede agregar una imagen desde su dispositivo haciendo clic en el campo principal de adición de imágenes o pegar la URL de esta imagen allí;
• las pestañas Correo electrónico y Proyecto muestran imágenes de sus galerías vinculadas al correo electrónico o a todo el proyecto (en nuestro ejemplo, tenemos un correo electrónico y un proyecto en blanco, por lo que no vemos ninguna opción de imagen aquí);
• las Estaciones y Decoraciónes contienen elementos creados por nuestro equipo de diseño entre los que puede elegir (buscando entre diferentes categorías) y establecer como imagen de fondo;
• Imagen de AI abre una ventana separada donde puede generar su propia imagen usando IA (más sobre eso más adelante);
• Banco de imágenes, Iconos y GIF le permiten elegir entre una amplia variedad de imágenes, iconos y GIF gratuitos de las diferentes fuentes sin salir del editor.

A pesar de todas las opciones, usaremos la imagen de nuestra guía de código para mantener la coherencia y así podrá ver que no hay diferencias visuales entre la codificación manual y nuestro editor.

Modifique la imagen de fondo de su correo electrónico

Entonces, hemos agregado nuestra imagen de fondo a la estructura y, por ahora, se ve así:

Está totalmente bien, ya que nuestro editor muestra el contenedor vacío en la parte superior de la imagen de fondo, marcando que puede agregar algo encima de su fondo. Pero ahora, repasemos las opciones de diseño que puedes aplicar a su imagen de fondo:

• Repetición de la imagen de fondo le permite activar la repetición de fondo;
• Horizontal and Vertical Posición le permiten establecer la posición exacta de su imagen de fondo dentro del elemento;
• Ancho de fondo and Alto de fondo le permiten establecer el tamaño de fondo exacto  de la imagen de fondo o usar ajustes preestablecidos como automático, portada o contención;
• Límitebrinda la opción de hacer un borde alrededor de su imagen de fondo y establecer si tendrá un borde completo o solo por lados;
• la opción Radio le permite establecer el radio de su imagen de fondo eligiendo la opción Radius para todas las esquinas a la vez o para cada esquina por separado.

Añada el contenido necesario

La última parte de trabajar con imágenes de fondo en el correo electrónico es agregar contenido encima de ellas. Para replicar nuestro ejemplo de la guía de codificación, agregaremos dos bloques de texto en el mismo contenedor.

Después de eso, agregaremos el mismo texto del ejemplo de codificación.

Después de eso, estableceremos el estilo de párrafo para el primer bloque de texto en H1:

Y como toque final, configuramos los rellenos superior e inferior para que se vea idéntico a nuestro primer ejemplo de codificación.

Voilà, tiene su imagen de fondo y texto encima sin necesidad de crear el código manualmente.

Generación de imágenes de fondo de soporte con GenAI

Hemos prometido contarle más sobre nuestra creación de imágenes de IA, así que comencemos. Puede generar cualquier imagen de fondo de sección utilizando las capacidades de GenAI sin salir del editor.

Demos unos pasos atrás en nuestra guía y hagamos clic en la pestaña Imagen de IA cuando agreguemos una imagen a su fondo.

Crear imágenes con GenAI es fácil. Todo lo que necesitas hacer es:

• escriba un mensaje para guiar la creatividad de GenAI de la manera que necesita;
• elija un modelo de IA (cada uno genera imágenes de manera diferente en términos de estilos, calidad y velocidad);
• establezca el estilo preferido de su imagen;
• establezca la relación de aspecto;
• haga clic en el botón Generar.

Una vez que haga clic, recibirá varias imágenes generadas, que puede aplicar al fondo haciendo clic en la que desee. Si no le gustan los resultados, siempre puede modificar su mensaje, modelo de IA u otras opciones y volver a generar la imagen.

Una vez que se agrega la imagen, puede aplicar la misma configuración de estilo que discutimos anteriormente.

Resumen

Como puede ver, crear imágenes de fondo en el correo electrónico no es tan difícil. Los ejemplos de código no son demasiado complicados y no hay demasiados, por lo que no le llevará mucho tiempo crear su propia imagen de fondo. Sin embargo, puede hacerlo aún más rápido y fácil usando nuestro editor y recibir el mismo resultado sin problemas.