Como inserir uma imagem de fundo em e-mails HTML (com exemplos de código)

E-mails não se resumem apenas ao conteúdo que você envia; eles também transmitem design e emoções ao seu público. As imagens de fundo são uma das maneiras mais rápidas e fáceis de dar um estilo único à sua newsletter. Neste artigo, você vai aprender a criar uma imagem de fundo HTML para seu modelo de e-mail, com todos os trechos de código necessários. Além disso, mostraremos como agilizar seu processo de criação e adicionar imagens de fundo sem codificação, usando o Stripo.

O que é uma imagem de fundo?

Antes de tudo, vamos entender o que exatamente é uma imagem de fundo. Basicamente, essas imagens de fundo ficam atrás do conteúdo principal do e-mail, servindo como uma “base” onde você pode organizar textos, imagens, banners, carrosséis e outros elementos. Parece simples, e realmente é.

Por que usar imagens de fundo?

Como a imagem de fundo parece simples e, até certo ponto, uma forma “antiga” de criar e-mails, por que se preocupar com elas?  

Existem três grandes motivos para você usar imagens de fundo na sua newsletter:

• o principal benefício de uma imagem de fundo é que você pode colocar conteúdo HTML adicional sobre ela. Em outros cenários, esse espaço de conteúdo seria ocupado por outro elemento (você precisa escolher entre uma imagem de fundo e texto, ou apenas uma imagem pronta com o texto já incluso, por exemplo);
• o texto sobre a imagem de fundo (diferente de uma imagem estática com texto embutido) ainda pode ser lido mesmo se o destinatário desativar a exibição de imagens, algo comum em conexões lentas ou instáveis;
• imagens de fundo oferecem mais possibilidades de design, permitindo criar e-mails únicos e reforçar sua marca combinando fundos e diferentes conteúdos.

Como você pode perceber, esses benefícios tornam o processo de criação de e-mails muito mais flexível, oferecendo diversas maneiras de definir o visual da sua mensagem.

O que você precisa saber antes de inserir imagens de fundo em um e-mail HTML

Antes de aplicar qualquer imagem de fundo ao seu e-mail, você deve garantir que ela se encaixará no seu design. À medida que você troca e adiciona imagens de fundo e conteúdo, algumas podem ficar boas, enquanto outras podem irritar seus olhos. E os motivos para isso são o que vamos abordar agora.

Taxa de contraste

A primeira coisa a considerar ao adicionar uma imagem de fundo ao seu e-mail é o contraste. Contraste no design de e-mails é a diferença de cor, tamanho e outros elementos visuais entre as diferentes partes do e-mail, que cria uma hierarquia e melhora a legibilidade.

É fundamental que as cores da imagem de fundo estejam bem combinadas com o conteúdo sobreposto, para garantir uma boa leitura do e-mail.

Ao criar uma imagem de fundo com conteúdo sobreposto, é recomendável seguir as Diretrizes de Acessibilidade para Conteúdo Web (WCAG). Esse conjunto de padrões internacionais ajuda a tornar sites e conteúdos digitais acessíveis a pessoas com deficiência. Adaptando sua imagem de fundo e o conteúdo às diretrizes, todos os destinatários conseguirão ler seus e-mails sem dificuldade.

Para simplificar o design, você pode conferir todas as combinações de cores que usar neste link.

Aparência geral e simplicidade

As cores e como elas combinam são importantes, mas não se esqueça do design geral e de como o fundo se harmoniza com o conteúdo. Tenha sempre em mente a densidade geral do fundo. Se houver muitos detalhes, não importa o quão bem escolhidas estejam as cores, o texto será extremamente difícil de ler. “Quanto mais, melhor” não se aplica aqui.

Versão alternativa

Por último, mas não menos importante, está a versão alternativa. Nem todos os clientes de e-mail oferecem suporte a imagens de fundo; como resultado, seu plano de fundo pode não ser exibido. Portanto, ao codificar, você precisa garantir que uma versão alternativa esteja disponível, que será exibida caso o e-mail seja aberto em clientes que não mostrem imagens de fundo. Em vez disso, você pode criar uma cor de fundo alternativa.

Como adicionar uma imagem de fundo em um e-mail HTML

Chegou a hora de colocar a mão na massa e criar sua própria imagem de fundo do zero. Neste guia, vamos mostrar cada etapa do processo e explicar todos os detalhes importantes para codificar corretamente imagens de fundo em e-mails. No final, você verá um exemplo simples de e-mail com uma imagem de fundo e texto sobreposto, que ficará assim:

Vamos usar um exemplo de código que você poderá copiar e inserir no seu e-mail depois.

Estrutura HTML básica

Primeiro, precisamos estabelecer a base do e-mail com uma imagem de fundo. O código ficará assim:

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

O código tem duas partes principais que sustentam a nossa imagem de fundo. A primeira é a seção <style></style>, responsável pelos estilos do e-mail e pela configuração da imagem de fundo. A segunda é <body></body>, onde você insere o conteúdo que aparecerá sobre a imagem de fundo.

Inserindo a estrutura de tabela para compatibilidade

O próximo passo é criar uma célula de tabela no e-mail. Muitos clientes de e-mail, principalmente os mais antigos, ainda utilizam tabelas para organizar o layout, então vamos usá-las para garantir que o e-mail apareça corretamente em todos os dispositivos.

Basta copiar este código e colar dentro da seção <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>
 

Inserimos este trecho de código aqui porque a seção <body> é onde fica o conteúdo visível do e-mail. O código possui duas tabelas principais:

• a tabela externa (width="100%") garante que o layout se ajuste a qualquer tamanho de tela;
• a tabela interna (width="600") contém o conteúdo do e-mail e é centralizada, oferecendo um visual limpo e profissional que funciona bem em diversos dispositivos e clientes de e-mail.

Criando a base para a imagem de fundo

Depois de lidar com a estrutura da tabela, precisamos criar um "invólucro" para nossa futura imagem de fundo. Basicamente, criaremos uma <div> dentro da tabela interna que conterá a imagem de fundo. Esta é uma parte importante, pois criaremos um contêiner dedicado para a imagem de fundo e garantiremos uma separação clara entre o conteúdo e a imagem de fundo.

Além disso, os estilos que adicionaremos depois permitirão modificar separadamente a aparência do conteúdo e da imagem de fundo, algo essencial para designs de e-mail mais flexíveis.

Use 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>
 

E cole o mesmo aqui:

Dessa forma, criamos um conteúdo básico em texto simples que será exibido sobre a imagem de fundo.

Inserindo o CSS da imagem de fundo

Agora chegamos à parte principal: fazer a imagem de fundo aparecer corretamente. No <head>, dentro da tag <style>, vamos adicionar o CSS da classe .email-body para definir a imagem de fundo e garantir que ela seja exibida corretamente em diversos clientes de e-mail.

Para aplicar a imagem de fundo, substitua <style></style> pelo seguinte 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>
 

A imagem de fundo é adicionada ao e-mail via URL, que você pode trocar por outra, se desejar.

Este código oferece diversas opções para ajustar a aparência da imagem de fundo e do conteúdo sobreposto. Vamos analisar cada uma delas, para que você saiba exatamente o que é possível alterar:

• margin: 0 remove qualquer margem padrão ao redor do corpo do documento. Por padrão, os navegadores geralmente aplicam uma pequena margem nas bordas da página. Definir como 0 garante que não haja espaçamento indesejado nas extremidades do e-mail;
• padding: 0 é bem parecido com o anterior, mas remove qualquer preenchimento (padding) padrão dentro do corpo. Padding é o espaço entre o conteúdo e a borda de um elemento. Definir como 0 garante que o conteúdo comece exatamente na borda do corpo, sem espaço extra;
• background-image é o elemento principal aqui e define a imagem de fundo para o elemento;
• background-repeat: no-repeat impede que a imagem se repita, garantindo que ela apareça apenas uma vez, mesmo que não preencha toda a área;
• background-size: cover controla como a imagem de fundo é dimensionada, e cover garante que a imagem cubra toda a área do elemento, mesmo que isso signifique que parte dela seja cortada (em termos simples, mantém a proporção da imagem enquanto preenche a área, evitando lacunas);
• background-position: center é necessário para centralizar a imagem de fundo dentro do elemento;
• width: 100% define a largura do elemento .email-body e garante que a imagem de fundo se estenda por toda a largura do e-mail;
• height: 100% define a altura do elemento .email-body como 100% do contêiner pai, fazendo com que o elemento ocupe todo o espaço vertical disponível;
• padding: 20px cria um espaço de 20px em todos os lados entre o conteúdo e as bordas do contêiner .content;
• color: white altera a cor do texto dentro do elemento .content para branco. Isso é especialmente importante quando há uma imagem de fundo escura, garantindo que o texto seja legível e se destaque;
• font-family: Arial, sans-serif define a família de fontes do texto como Arial.

Adicionando uma alternativa para a imagem de fundo

Agora, vamos finalizar nosso código de imagem de fundo com a informação importante de que clientes de e-mail podem não carregar imagens definidas como fundo do e-mail.

Copie este código e cole entre </style> e </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]-->
 

O código alternativo é relativamente simples aqui, mas vamos discutir brevemente o que ele faz:

• background: #f0f0f0 é a sua cor de fundo alternativa, que você pode alterar para a cor sólida necessária;
• <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true"> é um elemento VML (Vector Markup Language) usado pelo Outlook para exibir imagens de fundo;
• <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" /> define a imagem de fundo a ser usada no Outlook, então, se precisar alterá-la, basta substituir o link pela sua própria imagem;
• <!--[if mso]> ... <![endif]--> é um bloco especial para o Outlook, garantindo que ele possa exibir a imagem de fundo usando VML, enquanto outros clientes de e-mail ignoram essa parte.

Código completo

E pronto! O código do seu e-mail com imagem de fundo está pronto. Vamos deixar um exemplo de código completo para que você possa conferir se fez tudo corretamente ao seguir nosso guia.

<!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>
 

Como inserir uma imagem de fundo no seu e-mail usando o Stripo

Entender todo o funcionamento do código de imagem de fundo do seu e-mail é excelente, mas e se você não tiver tempo para aprender ou não tiver experiência com programação? É nesse ponto que o Stripo se torna útil. Veja um guia rápido de como adicionar uma imagem de fundo no nosso editor sem precisar escrever nenhuma linha de código.

Vamos demonstrar como tudo funciona utilizando nossa estrutura básica de e-mail padrão, que tem a seguinte aparência:

Abrir configurações de Estilos

Clique na estrutura onde você deseja colocar sua imagem de fundo e, em seguida, clique na aba Estilos.

Ativar a opção de imagem de fundo

Para começar a definir a imagem de fundo, clique no botão de ativação correspondente.

Selecione como deseja inserir sua imagem de fundo

Ao ativar o botão de Imagem de Fundo, uma janela aparecerá com várias opções para inserir uma imagem. Vamos analisar rapidamente cada uma delas:

• você pode adicionar uma imagem do seu dispositivo clicando no campo principal de adição de imagem ou colar o URL dessa imagem nele;
• as abas E-mail e Projeto mostram imagens das suas galerias vinculadas ao e-mail ou ao projeto inteiro (no nosso exemplo, temos um e-mail e um projeto em branco, então não vemos nenhuma opção de imagem aqui);
• Temporadas e Decorações contêm elementos criados pela nossa equipe de design que você pode escolher (pesquisando entre diferentes categorias) e definir como imagem de fundo;
• Imagem de IA abre uma janela separada onde você pode gerar sua própria imagem usando IA (mais detalhes sobre isso depois);
• Bancos de fotos, Ícones e GIFs permitem escolher entre uma grande variedade de imagens, ícones e GIFs gratuitos de diferentes fontes sem sair do editor.

Mesmo com todas as opções disponíveis, utilizaremos a mesma imagem do nosso guia de código, garantindo consistência e permitindo perceber que não há diferenças visuais entre codificar manualmente e usar o editor.

Ajuste a imagem de fundo do seu e-mail

Depois de inserir a imagem de fundo na estrutura, ela aparece assim por enquanto:

Não se preocupe, nosso editor exibe o contêiner vazio sobre a imagem de fundo, mostrando que é possível adicionar conteúdo por cima. Agora, vamos explorar as opções de design que podem ser aplicadas à sua imagem de fundo:

• Repetição da imagem de fundo permite ligar ou desligar a repetição da imagem;
• Posição horizontal e vertical definem exatamente onde a imagem de fundo será posicionada dentro do elemento;
• Largura e Altura da imagem de fundo permitem ajustar o tamanho exato ou usar valores pré-definidos como auto, cover ou contain;
• Borda possibilita adicionar uma borda à imagem de fundo, escolhendo se será ao redor de toda a imagem ou apenas em alguns lados;
• Raio permite arredondar os cantos da imagem de fundo, podendo aplicar a todos os cantos de uma vez ou individualmente.

Adicionar o conteúdo necessário

O último passo ao trabalhar com imagens de fundo em e-mails é colocar o conteúdo por cima delas. Para seguir o exemplo do nosso guia, adicionaremos dois blocos de texto dentro do mesmo contêiner.

Depois disso, adicionaremos o mesmo texto do exemplo de codificação.

Em seguida, vamos aplicar o estilo H1 ao primeiro bloco de texto:

E, como toque final, definimos os espaçamentos superior e inferior para que fique idêntico ao nosso primeiro exemplo de codificação.

Pronto! Agora você tem a imagem de fundo com o texto sobreposto, sem precisar escrever o código manualmente.

Criando imagens de fundo com GenAI

Conforme prometido, vamos mostrar como criar imagens com IA. É possível gerar qualquer imagem de fundo de seção diretamente pelo GenAI, sem precisar sair do editor.

Volte algumas etapas no guia e clique na aba AI Image ao adicionar uma imagem de fundo.

Gerar imagens com GenAI é simples. Basta seguir estes passos:

• escreva um prompt para direcionar a criatividade do GenAI conforme sua necessidade;
• selecione um modelo de IA (cada modelo produz imagens com estilos, qualidade e velocidade diferentes);
• escolha o estilo desejado para a imagem;
• defina a proporção da imagem;
• clique em Gerar.

Ao clicar, você verá várias imagens geradas, podendo aplicar ao fundo aquela que preferir. Se os resultados não forem satisfatórios, é possível ajustar o prompt, o modelo de IA ou outras configurações e gerar a imagem novamente.

Após adicionar a imagem, é possível aplicar as mesmas configurações de estilo mencionadas anteriormente.

Conclusão

Como vimos, criar imagens de fundo em e-mails não é nada complicado. Os exemplos de código são simples e poucos, então você pode criar sua própria imagem de fundo rapidamente. Mas, se quiser ainda mais facilidade e rapidez, pode usar nosso editor e obter o mesmo resultado sem esforço.