Background Images

[00:00:00]
>> Rodriguez: One thing that people don't necessarily know that you can do in email, or don't use it as they probably should, cuz it's a really useful technique, is using background images in email. So background images are just images that are applied to the background of an element, pretty simple.

[00:00:18]
This is usually done using CSS, the background property for shorthand, background image, background position, background size. There's a whole host of different CSS properties. But for email, it takes a little bit more work, nothing too fancy. But it's super helpful because it allows you to account for better designs.

[00:00:39]
When you're fed a Photoshop mockup that has a bunch of text on images, and you're prompted to create an all image-based email, but you don't want to, this is where something like a background image can really come into play. So you can still use live HTML text in your email, but then apply background images for that graphic element underneath it.

[00:01:01]
So it'll allow you to get around, still provide that accessible experience for people, but have a really well-designed, cool style for your email campaign. A couple of things keep in mind is that this uses not only inline CSS. But to be a little bit more reliable across email clients, you wanna use the HTML attribute as well, which we'll look at how that's applied.

[00:01:21]
And then this is really useful on table cells. So it works most reliably when that background image is applied to a table cell. That's kind of a container element of whatever that content happens to be. So let's look at how this is actually applied. I don't think I have an assignment for you guys, because it's similar to just using images.

[00:01:41]
But we'll look at an example of how this might be applied.
>> Rodriguez: I'm gonna open up this background image example.
>> Rodriguez: And if we open this up, you can see that we have pretty basic email, what we've been building up to this point. It has that logo, it has a heading, it has a hero image, has a bunch of copy, and then a button down below.

[00:02:07]
You can see we applied these background images to just show off how that works for an HTML email. So if we go into the code here, you can see that we're providing a little bit more structure for our email. We'll look at how this works a little bit later on too.

[00:02:22]
We're using tables to structure our email content and fry that layout, instead of just relying on that max width on that container div. So a little bit different, we don't have that div for each of these container elements. We're using the container table to provide that default styling, like the background color, the color of the text, the font family, and then we have our usual elements.

[00:02:44]
But then on something like the headline, where we have that,
>> Rodriguez: Where we have this dark blue kinda transparent background image, and then the hero image, where we have another one that's a little bit lighter colored. We're doing a couple things, we're using the background attribute, and we just provide the source of that background image for that attribute.

[00:03:11]
So this helps with older email clients that don't necessarily understand or render properly the background shorthand, or any of those CSS background properties. It'll make sure that that image applies in those different email clients. Then we also use this bgcolour, the background color attribute, to provide a fallback color.

[00:03:32]
So this is really important when we are in clients that disable those images by default. So they'll disable the background images, as well as any other regular images in your email. So if you're using something like white text on top of that background image, and that image doesn't load and you don't account for the background color, then that's gonna be completely inaccessible.

[00:03:54]
Nobody's gonna be able to read that text because it's white text on a white background. So it's good to provide this fallback background color for when your images aren't loaded. For more modern clients, we can use this background CSS rule, this shorthand. We can provide the background fallback color here, the URL for our image.

[00:04:17]
You can also set things like how it repeats across the x and y axis. If it's a larger image, like a graphic, like a photograph or something like that, then you can set like the background size like to cover or contains, some of that more modern stuff, to make sure that it scales properly across those elements.

[00:04:37]
But beyond that, you don't have to worry about too much. Combining these two elements, these two approaches together using HTML attributes. And the inline CSS will make sure that it works across the widest range of different email clients. It's still not gonna work everywhere, but that's why we have these fallback colors, to make sure that any text that's on top of it is still readable.

[00:05:01]
So you can do some cool things with background images too. You could add an animated GIF in there if you want some sort of motion for that background image. LMIS, a couple years ago for a conference, actually used background videos to do a little bit longer, lighter weight version of an animated GIF.

[00:05:19]
It didn't work everywhere, it fell back to just a static background image. And then clients that didn't respect that, it fell back to a background color. There's definitely some cool techniques that you can use background images for. And it's one way to create more accessible emails while still providing that extra styling that you get with graphics and illustrations and photographs, and stuff like that.

[00:05:39]
Again, this example, it's standalone Background-image.html, so it's worth checking out there.