Fake background image, what does that mean!?
In fact I'm not going to mystify you, it is not a background imagebut it looks like an image, except that it is made with HTML elements and CSS effects. Well, that's what I did with it! Because this concept was suggested by Rémi Parmentier on his blog in a post entitled "Fake background in email".. Rémi told us that the support of background images in email marketing is still a bit, hm, how to say... Fastidious, since Outlook.com only interprets the attribute "background", which is responsible for and that decomposes him that the image will repeat horizontally and vertically, while the Gmail for Android app with an account other than Gmail (aka GANGA) did not accept the background property at all. The webmails La Poste and Free do not support background images either. Things have changed since this article from July 2017, but I still wanted to experiment with the method proposed by Hteumeuleu.
But what method are we talking about?
The assumption is: when possible, create a fake background image, without using the background property. To do this, you need to master the principle of absolute positioning in an email that Mark Robbins first mentioned, and that we had translated into French. Check out these links to learn the code to set up. So I set to work to test this technique on a Netflix email, in line with our previous post 😉
So what are the experiments in this mail?
- The generation of false background images
- The absolute positioning
- Gradients
To further illustrate my point, this is what I want to achieve:
This is our own design. So if it wasn't obvious and your contrast is rotten, this is a character, The Lady with the Crooked Neck, positioned in front of a window, with a gloomy atmosphere. Hey, did you forget we were approaching Halloween or what? 😀 The character does consist of a png image, with a transparent background. My challenge is in the generation of the background window using HTML and CSS elements. You are beginning to understand why I insist on the term "false background image".
Is it really possible?
Yes, almost anything is conceivable. The real problem is the support.
Need help?
Reading content isn't everything. The best way is to talk to us.
As in the previous post, I didn't want to "spill" on the interpretation of this false background image and absolute positioning process on email software. I'm not manure. But if you want to gather more information about the rendering of mail clients, no problem, just ask! There is always a test available on the Litmus Builder.
An email technique would not be complete without specific code for desktop versions of Outlook using the Word rendering engine.
It is clear that what I have generated does not fit everywhere (and in particular on Outlook) but Rémi was considering other solutions on this point to ensure a little better on this damn client that is Outlook. I didn't take the time here to insert the VML Rect elements that could potentially improve the rendering on Outlook. But in the future, I hope to get around to it. However, a Netflix campaign that screws up on Outlook, I feel like saying balek!
The fact remains that I had fun reconstructing this opening in HTML & CSS, playing with the positioning of the multiple elements. I did not try to embellish the whole with animation. I did not want to overload the result. The first will is to test, to experiment, to have fun on new techniques and processes. I am rather satisfied with the result. What is your opinion? Can (should) these original methods be integrated into emailing? What parameters do you think should be taken into account? In my humble opinion, knowing your recipients' viewing media can help you decide...
