Come aggiungere un’immagine di sfondo in HTML alla tua email (esempi di codice inclusi)

Le email non riguardano solo il contenuto e ciò che offrono al destinatario. Riguardano anche il design e le emozioni che suscitano nel tuo pubblico. Le immagini di sfondo nelle email sono uno dei modi più comuni, facili e veloci per creare uno stile unico per la tua newsletter. Questo articolo è interamente dedicato a loro. Ti mostreremo come creare un'immagine di sfondo per il tuo modello di email, includendo ogni singolo pezzo di codice di cui avrai bisogno. Oltre a ciò, vedremo come puoi risparmiare tempo nel tuo processo creativo e aggiungere immagini di sfondo senza codificare, utilizzando Stripo.

Cos’è un’immagine di sfondo?

Prima di tutto, cerchiamo di capire che cos'è esattamente un’immagine di sfondo. Nella loro essenza, queste immagini vengono applicate dietro il contenuto principale dell'email, fungendo da "piatto di portata" su cui puoi disporre il resto del contenuto della tua email (testi, altre immagini, banner, caroselli e altro). Sembra piuttosto semplice, e in realtà lo è.

Perché ne hai bisogno?

Poiché l’immagine di sfondo sembra semplice e, in un certo senso, un metodo "vecchio stampo" per disegnare le tue email, perché preoccuparsene? 

Abbiamo tre vantaggi distintivi per cui dovresti prendere in considerazione l'utilizzo di immagini di sfondo quando crei la tua newsletter:

• il vantaggio principale di un’immagine di sfondo risiede nella facoltà di collocarvi sopra ulteriore contenuto in HTML, mentre, in altre configurazioni, questa sezione sarebbe occupata da altri elementi (ad esempio, si presenta l'alternativa tra un'immagine di sfondo abbinata a testo, oppure una semplice immagine statica con il testo già integrato);
• il testo sovrapposto a un'immagine di sfondo (a differenza di un'immagine statica con testo già incorporato) può essere letto anche se le immagini sono disattivate (alcuni destinatari possono ancora disattivare la visualizzazione delle immagini a causa di una connessione Internet limitata o debole);
• l'uso delle immagini di sfondo ti offre più opportunità per progettare email uniche e per mettere in risalto il tuo brand, combinando e abbinando sfondi e vari contenuti da sovrapporvi.

Come puoi notare, hai un insieme di vantaggi piuttosto consistenti che possono diversificare notevolmente il processo di design e l'aspetto finale delle tue email.

Cose da sapere prima di aggiungere l'immagine di sfondo alla tua email HTML

Prima di inserire un'immagine di sfondo nell'email, devi assicurarti che sia adatta al tuo design. Sostituendo o aggiungendo immagini di sfondo e contenuti, alcuni funzioneranno bene, mentre altri risulteranno esteticamente pessimi. Le ragioni di questi effetti sono ciò che esamineremo ora.

Rapporto di contrasto

La prima cosa a cui dovresti pensare quando aggiungi un'immagine di sfondo alla tua email è il contrasto. Nel design delle email, il contrasto è la differenza di colore, dimensione e altri elementi visivi tra le diverse parti dell'email che crea una gerarchia e migliora la leggibilità.

È fondamentale per la leggibilità complessiva dell'email abbinare correttamente i colori dell'immagine di sfondo e del contenuto che vi è sovrapposto.

Quando crei un'immagine di sfondo con contenuto sovrapposto, è opportuno seguire le Linee guida per l'accessibilità dei contenuti Web (WCAG). Si tratta di una serie di standard tecnici riconosciuti a livello internazionale per rendere i siti web e i contenuti digitali accessibili alle persone con disabilità. Se adatti l'immagine di sfondo e il contenuto a queste linee guida, chiunque nel tuo pubblico sarà in grado di leggere le tue email.

Per semplificare il processo di progettazione, tutte le combinazioni cromatiche che impieghi possono essere verificate qui.

Aspetto generale e semplicità

I colori e il modo in cui si abbinano sono importanti, ma non dimenticare l'aspetto generale del design e come il tuo sfondo si presenta insieme al contenuto. Tieni sempre a mente la densità complessiva dello sfondo. Se ci sono troppi dettagli, non importa quanto siano ben scelti i colori, il testo risulterà estremamente difficile da leggere. Il detto "più ce n'è, meglio è" non si applica in questo caso.

Versione di fallback

Ultima, ma non meno importante, è la versione di fallback. Non tutti i client di posta supportano le immagini di sfondo; di conseguenza, il tuo sfondo potrebbe non essere visualizzato affatto. Pertanto, durante la codifica, devi assicurarti che sia disponibile una versione di fallback che verrà visualizzata se l'email viene aperta su client che potrebbero non mostrare le immagini di sfondo. Puoi invece creare un colore di fallback per il tuo sfondo.

Come codificare l'immagine di sfondo della tua email HTML

Ora, passiamo alla parte principale della nostra guida, ovvero la creazione della tua immagine di sfondo da zero. Ti guideremo attraverso l'intero processo passo dopo passo e ti spiegheremo ogni sfumatura che devi conoscere quando codifichi le immagini di sfondo nelle email. Alla fine di questa guida, avrai un esempio di un'email molto basilare con un'immagine di sfondo e del testo sovrapposto che apparirà in questo modo:

Utilizzeremo un esempio di codice che potrai incollare nella tua email in seguito.

Struttura HTML di base

Innanzitutto, dobbiamo gettare le fondamenta per la nostra email con un'immagine di sfondo. Il codice per farlo sarà questo:

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

Questo codice ha due parti principali che costituiscono la base della nostra immagine di sfondo. La prima è la sezione <style></style>, che conterrà il codice per gli stili dell'email e anche per l'immagine di sfondo. La seconda è il tag <body></body>, dove dobbiamo inserire il contenuto che sarà posizionato sopra l'immagine di sfondo dell'email.

Aggiunta della struttura a tabella per la compatibilità 

Il passo successivo è aggiungere una cella di tabella alla nostra email. Dal momento che molti client di posta (specialmente quelli più datati) si affidano alle tabelle per il layout, utilizzeremo una struttura a tabella per assicurarci che l'email venga visualizzata correttamente su tutti i dispositivi.

Copia questo codice e incollalo nella 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>
 

Inseriamo questa parte di codice qui poiché la sezione <body> contiene il contenuto visibile che viene renderizzato nell'email. Questo codice presenta due tabelle, fondamentalmente una esterna e una interna:

• la tabella esterna con width="100%" assicura che il layout possa adattarsi a diverse dimensioni dello schermo;
• la tabella interna con width="600" contiene il contenuto effettivo dell'email ed è centrata per creare un look pulito e professionale che funzioni su diversi dispositivi e client di posta.

Creazione della base per l'immagine di sfondo

Una volta gestita la struttura a tabella, dobbiamo creare un "contenitore" per la nostra futura immagine di sfondo. In sostanza, creeremo un div all'interno della tabella interna che conterrà l'immagine di sfondo. Questa è una parte importante, poiché in questo modo si crea un container dedicato per l'immagine di sfondo e si stabilisce una chiara separazione tra il contenuto e l'immagine di sfondo stessa.

Oltre a ciò, il codice degli stili che aggiungeremo in seguito potrà modificare separatamente l'aspetto del contenuto e dello sfondo, il che è fondamentale per disporre di maggiori possibilità nel design dell'email.

Prendi questo codice:

<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 incollalo qui:

Come risultato, abbiamo creato il contenuto di base (un semplice testo) che sarà sovrapposto alla nostra immagine di sfondo.

Aggiunta del codice CSS per l'immagine di sfondo

Ora, passiamo alla parte principale, ovvero far apparire l'immagine di sfondo nel modo corretto. All'interno del tag <style> nella <head>, aggiungeremo il codice CSS per la classe .email-body, in modo da impostare l'immagine di sfondo e assicurarci che appaia bene su tutti i diversi client di posta.

Per dare vita alla tua immagine di sfondo, sostituisci il tag <style></style> con questo codice:

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

La nostra immagine di sfondo viene inserita nell'email tramite un link URL, che puoi sostituire qui.

Con questo codice, hai diverse opzioni che possono cambiare l'aspetto della tua immagine di sfondo e del contenuto che vi è sovrapposto. Analizziamole una per una, così avrai una migliore comprensione di cosa puoi effettivamente modificare qui:

• margin: 0 rimuove qualsiasi margine predefinito attorno al corpo del documento. Per impostazione predefinita, i browser applicano spesso un piccolo margine attorno ai bordi della pagina. Impostandolo a 0 si garantisce che non ci sia spaziatura indesiderata sui bordi esterni dell'email;
• padding: 0 è piuttosto simile al precedente, ma rimuove qualsiasi padding predefinito all'interno del body. Il padding è lo spazio tra il contenuto e il bordo di un elemento. Impostandolo a 0 si garantisce che il contenuto inizi esattamente dal bordo del body senza spazio aggiuntivo;
• background-image è l'elemento chiave qui e definisce l'immagine di sfondo per l'elemento;
• background-repeat: no-repeat impedisce che l'immagine si ripeta, assicurando che venga visualizzata una sola volta, anche se non riempie l'intera area;
• background-size: cover controlla il modo in cui l'immagine di sfondo viene ridimensionata. L'impostazione cover garantisce che l'immagine copra l'intera area dell'elemento, anche se ciò significa che potrebbe essere ritagliata (in termini semplici, mantiene le sue proporzioni riempiendo l'area ed evitando eventuali spazi vuoti);
• background-position: center è necessario per centrare l'immagine di sfondo all'interno dell'elemento;
• width: 100% imposta la larghezza dell'elemento .email-body e garantisce che l'immagine di sfondo si estenda per tutta la larghezza dell'email;
• height: 100% imposta l'altezza dell'elemento .email-body al 100% del suo contenitore genitore, facendo in modo che l'elemento riempia lo spazio verticale disponibile;
• padding: 20px crea uno spazio di 20 pixel su tutti i lati tra il contenuto e i bordi del contenitore .content;
• color: white cambia il colore del testo all'interno dell'elemento .content in bianco. Questo è particolarmente importante quando c'è un'immagine di sfondo che potrebbe essere scura, garantendo così che il testo sia leggibile e risalti chiaramente;
• font-family: Arial, sans-serif imposta la famiglia di caratteri per il testo su Arial.

Aggiunta della parte di fallback

Ora, concludiamo il codice della nostra immagine di sfondo con l'informazione importante che i client di posta elettronica non sono in grado di caricare le immagini impostate come sfondo dell'email.

Copia questo codice e incollalo tra </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]-->
 

l codice di fallback qui è piuttosto semplice, ma vediamo brevemente a cosa serve:

• background: #f0f0f0 è il tuo colore di sfondo di fallback che puoi cambiare con il colore a tinta unita di fallback di cui hai bisogno;
• <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true"> è un elemento VML (Vector Markup Language) utilizzato da Outlook per visualizzare le immagini di sfondo;
• <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" /> definisce l'immagine di sfondo da utilizzare in Outlook, quindi se hai bisogno di cambiarla, è sufficiente sostituire il link con l'URL della tua immagine;
• <!--[if mso]> ... <![endif]--> è un blocco speciale per Outlook, che garantisce che Outlook possa visualizzare l'immagine di sfondo utilizzando il VML, mentre gli altri client di posta ignorano questa parte.

Codice completo

E questo è praticamente tutto. Il codice della tua email con immagine di sfondo è pronto. Ti lasceremo un esempio di codice completo così potrai verificare di aver fatto tutto correttamente seguendo la nostra guida.

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

Come aggiungere un'immagine di sfondo alla tua email in Stripo

Comprendere il funzionamento del codice per l'immagine di sfondo della tua email, dall'inizio alla fine, è fantastico. Ma cosa succede se non hai tempo per impararlo o non hai alcuna esperienza di codifica? È qui che entra in gioco Stripo. Ecco una breve guida su come puoi aggiungere un'immagine di sfondo nel nostro editor senza scrivere una singola riga di codice.

Ti mostreremo come funziona il tutto utilizzando la nostra struttura email di base predefinita che appare così:

Apri le impostazioni di Stile

Clicca sulla struttura in cui desideri inserire la tua immagine di sfondo e poi clicca sulla scheda Stili.

Attiva l'opzione immagine di sfondo

Per iniziare a configurare la tua immagine di sfondo, clicca sull'interruttore con lo stesso nome.

Scegli un modo per aggiungere la tua immagine di sfondo

Una volta che hai cliccato sull'interruttore "Immagine di Sfondo", vedrai una finestra con diverse opzioni per aggiungere un'immagine. Analizziamole brevemente una per una:

• puoi aggiungere un'immagine direttamente dal tuo dispositivo cliccando sul campo principale di aggiunta dell'immagine o incollando l'URL di tale immagine;
• le schede Email e Progetto mostrano le immagini dalle tue gallerie legate alla singola email o all'intero progetto (nel nostro esempio, abbiamo un'email e un progetto vuoti, quindi non vediamo alcuna opzione di immagine qui);
• Ricorrenze e Decorazione contengono elementi realizzati dal nostro team di progettazione che puoi scegliere (cercando tra diverse categorie) e impostare come immagine di sfondo;
• Immagine AI apre una finestra separata dove puoi generare la tua immagine utilizzando l'IA (ne parleremo più avanti);
• Repertorio, Icone e GIF ti permettono di scegliere tra un'ampia varietà di immagini, icone e GIF gratuite provenienti da diverse fonti senza uscire dall'editor.

Nonostante tutte le opzioni, utilizzeremo l'immagine della nostra guida di codifica per mantenere la coerenza, in modo che tu possa vedere che non ci sono differenze visive tra la codifica manuale e il nostro editor.

Ritocca l’immagine di sfondo della tua email

Quindi, abbiamo aggiunto la nostra immagine di sfondo alla struttura, e per ora, il risultato è questo:

È assolutamente normale, in quanto il nostro editor mostra il contenitore vuoto sopra l'immagine di sfondo, segnalando che puoi aggiungere qualcosa in primo piano rispetto allo sfondo. Ma ora, analizziamo le opzioni di design che puoi applicare alla tua immagine di sfondo:

• Ripetizione dell'immagine di sfondo ti permette di attivare la ripetizione dello sfondo;
• Posizione orizzontale e verticale ti consentono di impostare la posizione esatta della tua immagine di sfondo all'interno dell'elemento;
• Larghezza e Altezza dello sfondo ti permettono di impostare la dimensione esatta dell'immagine di sfondo o di usare delle preimpostazioni come auto, copertura completa o contenimento;
• Bordo ti fornisce l'opzione di creare un bordo attorno alla tua immagine di sfondo e di impostare se avrà un bordo completo o solo per alcuni lati;
• l'opzione Raggio ti consente di impostare il raggio per la tua immagine di sfondo scegliendo l'opzione Radius per tutti gli angoli in una volta sola o per ogni angolo separatamente.

Aggiungi il contenuto necessario

L'ultima parte del lavoro con le immagini di sfondo nelle email consiste nell'aggiungere contenuti sopra di esse. Per replicare il nostro esempio dalla guida di codifica, aggiungeremo due blocchi di Testo nello stesso contenitore.

Dopo ciò, aggiungeremo lo stesso testo dell'esempio di codifica.

Dopo ciò, imposteremo lo stile del paragrafo per il primo blocco di testo su H1:

E come tocco finale, impostiamo il padding superiore e inferiore per renderlo identico al nostro primo esempio di codifica.

Voilà, hai la tua immagine di sfondo e il testo sopra di essa senza la necessità di creare il codice manualmente.

Generare immagini di sfondo di supporto con GenAI

Avevamo promesso di parlarvi di più della nostra creazione di immagini tramite AI, quindi iniziamo. Potete generare qualsiasi immagine di sfondo per le sezioni utilizzando le funzionalità della GenAI senza uscire dall'editor.

Facciamo un passo indietro nella nostra guida e clicchiamo sulla scheda Immagine AI quando aggiungiamo un'immagine al tuo sfondo.

Creare immagini con GenAI è facile. Tutto ciò che devi fare è:

• scrivi un prompt per guidare la creatività di GenAI nel modo che ti serve;
• scegli un modello AI (ciascuno genera immagini in modo diverso in termini di stili, qualità e velocità);
• imposta lo stile preferito per la tua immagine;
• imposta il rapporto d'aspetto;
• clicca sul pulsante Genera.

Una volta cliccato, riceverai diverse immagini generate, che potrai applicare allo sfondo cliccando su quella che preferisci. Se i risultati non ti soddisfano, puoi sempre ottimizzare il tuo prompt, il modello AI o altre opzioni e rigenerare l'immagine.

Una volta che l'immagine è stata aggiunta, puoi applicare le stesse impostazioni di stile che abbiamo discusso in precedenza.

Concludendo

Come puoi vedere, creare immagini di sfondo nelle email non è così difficile. Gli esempi di codice non sono troppo complicati, e non sono molti, quindi non ti ci vorrà molto tempo per creare la tua immagine di sfondo. Tuttavia, puoi farlo ancora più velocemente e più facilmente utilizzando il nostro editor e ottenere lo stesso risultato senza problemi.