How to Set a Background in HTML Emails — Current Ways to Change Background Images

In HTML emails, the background is usually set using inline CSS styles. However, keep in mind that many email clients have their own quirks and limitations in CSS support, so you need to choose an approach that's most compatible with the majority of email clients.

Here are a few ways to set it.

background-color. Lets you set the color of the <body> element or another container in the email.

background-image. You can use a background image. However, keep in mind that not all email clients support this feature, and the image may be blocked by some security systems.

base64. To make sure the image displays in all email clients, you can embed it directly into the HTML using this code.

background-repeat. If you need to repeat a background pattern, use this parameter.

background-attachment. Suited for creating a fixed-background effect (it stays in place while the page content scrolls).

Remember that it's important to test how your HTML email displays across different email clients to make sure everything renders correctly.

Can you use only HTML

Yes, you can use only HTML, but in that case you'll be limited to HTML's basic capabilities without CSS.

The background property. HTML5 includes a background attribute for the <body> element, which lets you set a color, a background image, or both at once.

The bgcolor attribute. Sets the color of the <body> element.

However, it's worth noting that using only HTML for styling web pages is limited, and you won't be able to achieve complex effects or responsive layouts. CSS provides a more flexible and powerful way to control styles, including background images, repetition, size, and position, so it's recommended to use CSS for styling web pages.

How to set a background in HTML

Colors in emails are written as hexadecimal HEX numbers (#444444). It's important to remember that not all email clients handle shorthand HEX codes, so they shouldn't be used in campaign markup. RGB-format colors won't work either.

In markup, the background is set through the background=»» and bgcolor=»» attributes on the <table> tag.

Not all email clients process a page background set via CSS styles. So it's better to avoid the background property and its variants (background-image, background-visibility, background-size).

<html>

<head>

<title>Text and background color</title>

<style>

.colortext {

background-color: #ffe; /* Background color */

color: #930; /* Text color */

}

</style>

</head>

<body>

</form>

</body>

</html>

Using a single color

How to make an HTML background stand out and be sure that

it doesn't get in the way of reading? Use a single color. We recommend combining images with hard-coded colors.

Emails made up only of images often end up in spam or don't display at all if the user has image display disabled in their mailbox.

For your email to look cohesive, three elements should match:

the background color of the photos;
the color of the HTML text block;
the background color of the alt text, if the images don't display.

If you're a freelance coder without access to a designer but still want a cohesive email, use this service. It will help you "pull" all the necessary colors from an image, already in HEX format.

Several colors

Color can be used not just for decoration, but to organize the blocks of an email. A gradient or color dividers work great for creating a sense of "hierarchy" in the content and effectively guide the reader's attention.

If you want to make the blocks of your email different colors, it makes sense to set them via the background=»» and bgcolor=»» attributes in <table> for each one.

A really simple way

If you just got lost in the code, we recommend turning to email builders — like Letteros.

Here you can recolor blocks in one click. And with a second click — convert a block into an image, if needed.

Images as an email background

Some builders let you set images as the background of email blocks. You can do this in Letteros too.

You can also use an image as the background for the entire email. But it will only be visible to subscribers on desktop. On most mobile devices, these images don't display at all. Thanks to a background image for the whole email, your campaigns will feel more striking and thematic.

Such a large-scale image won't affect the body of the email in any way. You can still place banners, product layouts, frames, footers, headers, and any other blocks on top of it.

When choosing a background image, it's important to keep the seams in mind. It's like wallpaper in a room: the pattern should look good when you step back and view the whole room. On this platform from Campaign Monitor, you can pick a "bulletproof" background for your campaign and be confident it will look great on any OS. It also lists the HEX colors for the code, along with the snippet of code to insert into <body>.

Rules for working with a background image

When adding background images to emails, it's important to keep a few details in mind.

The images you choose should be thematic and not distract from the email's main message.
Only add one image as the background for the entire email. This improves readability, while multiple images will just "clutter" the email.
If you're using a builder, enable responsiveness. This will help the background display correctly on both mobile and desktop devices.

Texture

To give an HTML page background a textured look, you can use a background image with a texture.

First, choose a suitable image with the texture you want to use as the background. There are plenty of free textured images online, or you can always create your own.

Make sure the chosen image has an appropriate size and proportions. Textured images are usually small with a repeating pattern.

Once you've chosen a textured image, insert it as the background image for the <body> element of your HTML document.

In CSS, you can also specify the background image's parameters: repetition, position, size, and others. You can use `background-repeat: repeat-x;` to repeat the texture only horizontally, or `background-size` to change its size.
It's important to test how the texture displays across different browsers and devices to make sure it renders correctly and looks good.

Semi-transparent background

In CSS, you can use the background-color property with an RGBA value (red, green, blue, and an alpha channel). The alpha channel determines the color's transparency, where 0 means fully transparent and 1 means fully opaque.

Here's an example of how to do this:

.transparent-bg {

background-color: rgba(255, 255, 255, 0.5); /* White color with 0.5 transparency */

}

In this example, rgba(255, 255, 255, 0.5) specifies white with 50% transparency. You can change the values of the red, green, and blue channels (the first three numbers) as you like, as well as change the alpha channel value (the last number) to control the level of transparency.

You can also use a hexadecimal alpha value, where 00 means fully transparent and FF means fully opaque.

.transparent-bg {

background-color: #ffffff80; /* White color with 50% transparency */

}

In this example, #ffffff80 means white with 50% transparency (80 in hex).

Choosing the right background is very important, so it deserves careful attention in both selection and design.