Sunday, December 17, 2023
HomeEmail MarketingCSS Background Pictures in Outlook.com

CSS Background Pictures in Outlook.com


Outlook Background Images

Nice information! Outlook.com and Workplace 365 Outlook (also called OWA) now helps CSS background photos. Till now, Microsoft’s webmail properties solely supported desk background picture attributes and never assist CSS background photos. This restriction compelled electronic mail designers to make use of desk background attributes as a way to show a background picture in Outlook.com.

Fortunately this assist is enabled in each the “basic” and beta Outlook webmail shoppers. This variation has been propagated to the Outlook iOS and Android apps as nicely. A lot due to Jóni de Sousa from Altaire who alerted me to this growth.

Advantages of CSS Background Pictures

A key advantage of CSS background photos over desk background attributes is the power to measurement and place the background picture. This enables the designer to measurement the background to the dimensions of the container or to make use of a a lot bigger “retina” picture because the background to offer the e-mail a way more polished look.

Background Picture Attribute on a Desk

<desk width="500"><tr><td background="bgimage.jpg">
...
</td></tr></desk>

CSS Background Picture

background-image:url('bgimage.jpg')

Background Pictures Nonetheless Not Universally Supported

There are nonetheless a couple of shoppers that don’t assist CSS background photos (or any background photos) so relying in your viewers it’s possible you’ll want to preserve utilizing background picture attributes along with CSS background picture for electronic mail shoppers that assist it. Both manner, be sure you all the time outline an appropriate background shade as a fallback in case your picture is just not displayed.

That is the place E-mail on Acid turns out to be useful. You may rapidly see how dozens of shoppers render your code modifications in a single take a look at.

Supported Background Properties in Outlook.com

Outlook.com helps background photos in each shorthand and particular person properties.

background: url('bgimage.jpg') heart / cowl no-repeat #888888; 

As a result of quirks in different shoppers corresponding to Yahoo! Mail with shorthand background kinds, its most likely greatest to make use of the person properties when utilizing background photos. The next background properties are supported in Outlook.com:

background-image
background-repeat
background-size
background-position
background-color
background-origin
background-attachment

Don’t Guess, Check!

At E-mail on Acid, testing is on the core of our mission. After you’ve completed establishing the right design in your marketing campaign, guarantee the e-mail seems to be unbelievable in EVERY inbox. As a result of each consumer renders your HTML otherwise, it’s crucial to check your electronic mail throughout the preferred shoppers and units.

Attempt us free for 7 days and get limitless entry to electronic mail, picture and spam testing to make sure you get delivered and look good doing it!

Begin testing at present!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments