Background color support for images

Implementation status

• TypeScript (available with the Outlook container in the visualizer)
• UWP (#1412)
• .NET (#1415)
• iOS (#1414)
• Android (#1413)
• Documentation

Problem

Often, it is necessary to present one single image on top of a variety of different background colors. It is in general not practical to either have to dynamically generate the appropriate image server-side or to have to store all possible combinations somewhere.

Solution

Add a backgroundColor property to the Image element. With that, a card author can lay an image with a transparent background on top of any color they want. The background color respects the image’s style, e.g. when set to “person”, which crops the image to a circle, the background color is clipped to the circle.

Example:

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
	    {
	        "type": "Image",
	        "size": "medium",
	        "url": "http://messagecardplayground.azurewebsites.net/assets/circleontransparentbackground.png",
	        "backgroundColor": "#CCCCCC"
	    },
	    {
	        "type": "Image",
	        "size": "medium",
	        "url": "http://messagecardplayground.azurewebsites.net/assets/circleontransparentbackground.png",
	        "backgroundColor": "#DDDDDD",
	        "style": "person"
	    }
	]
}

The above payload renders the same image on two different colors using the both supported image styles:

[andrewleader]

Did we think about accessibility for this?

For images, we have ideas in place for how we could append query strings to request high contrast versions of the image, allowing the author to provide a different image for high contrast… but we currently don’t have a way to allow the author to provide a different background color for high contrast.

I suppose the backgroundColor property could also be an object that includes “normal” and “highContrast” colors?

I’ll add this to the accessibility bucket list.

[paulcam206]

Documentation is done and in the mahiding/site1.1 branch.