{"action":"opened","issue":{"url":"https://api.github.com/repos/Microsoft/AdaptiveCards/issues/823","repository_url":"https://api.github.com/repos/Microsoft/AdaptiveCards","labels_url":"https://api.github.com/repos/Microsoft/AdaptiveCards/issues/823/labels{/name}","comments_url":"https://api.github.com/repos/Microsoft/AdaptiveCards/issues/823/comments","events_url":"https://api.github.com/repos/Microsoft/AdaptiveCards/issues/823/events","html_url":"https://github.com/Microsoft/AdaptiveCards/issues/823","id":268203155,"number":823,"title":"Background color support for images","user":{"login":"dclaux","id":1334689,"avatar_url":"https://avatars1.githubusercontent.com/u/1334689?v=4","gravatar_id":"","url":"https://api.github.com/users/dclaux","html_url":"https://github.com/dclaux","followers_url":"https://api.github.com/users/dclaux/followers","following_url":"https://api.github.com/users/dclaux/following{/other_user}","gists_url":"https://api.github.com/users/dclaux/gists{/gist_id}","starred_url":"https://api.github.com/users/dclaux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dclaux/subscriptions","organizations_url":"https://api.github.com/users/dclaux/orgs","repos_url":"https://api.github.com/users/dclaux/repos","events_url":"https://api.github.com/users/dclaux/events{/privacy}","received_events_url":"https://api.github.com/users/dclaux/received_events","type":"User","site_admin":false},"labels":[{"id":612331714,"url":"https://api.github.com/repos/Microsoft/AdaptiveCards/labels/Area-Documentation","name":"Area-Documentation","color":"fbca04","default":false},{"id":515628523,"url":"https://api.github.com/repos/Microsoft/AdaptiveCards/labels/Area-Renderers","name":"Area-Renderers","color":"fbca04","default":false},{"id":497291984,"url":"https://api.github.com/repos/Microsoft/AdaptiveCards/labels/Area-Schema","name":"Area-Schema","color":"fbca04","default":false},{"id":612560671,"url":"https://api.github.com/repos/Microsoft/AdaptiveCards/labels/Status-Ready%20for%20Review","name":"Status-Ready for Review","color":"c2e0c6","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/Microsoft/AdaptiveCards/milestones/4","html_url":"https://github.com/Microsoft/AdaptiveCards/milestone/4","labels_url":"https://api.github.com/repos/Microsoft/AdaptiveCards/milestones/4/labels","id":2689363,"number":4,"title":"v1.1","description":"","creator":{"login":"matthidinger","id":1432195,"avatar_url":"https://avatars1.githubusercontent.com/u/1432195?v=4","gravatar_id":"","url":"https://api.github.com/users/matthidinger","html_url":"https://github.com/matthidinger","followers_url":"https://api.github.com/users/matthidinger/followers","following_url":"https://api.github.com/users/matthidinger/following{/other_user}","gists_url":"https://api.github.com/users/matthidinger/gists{/gist_id}","starred_url":"https://api.github.com/users/matthidinger/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matthidinger/subscriptions","organizations_url":"https://api.github.com/users/matthidinger/orgs","repos_url":"https://api.github.com/users/matthidinger/repos","events_url":"https://api.github.com/users/matthidinger/events{/privacy}","received_events_url":"https://api.github.com/users/matthidinger/received_events","type":"User","site_admin":false},"open_issues":30,"closed_issues":2,"state":"open","created_at":"2017-08-08T21:42:16Z","updated_at":"2017-10-24T22:08:21Z","due_on":"2017-11-01T07:00:00Z","closed_at":null},"comments":0,"created_at":"2017-10-24T22:08:21Z","updated_at":"2017-10-24T22:08:21Z","closed_at":null,"author_association":"MEMBER","body":"# Implementation status\r\n- [X] TypeScript (available with the Outlook container in the visualizer)\r\n- [ ] UWP\r\n- [ ] .NET\r\n- [ ] iOS\r\n- [ ] Android\r\n- [ ] Documentation\r\n\r\n# Problem\r\nOften, 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.\r\n\r\n# Solution\r\nAdd 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.\r\n\r\n# Example:\r\n```\r\n{\r\n\t\"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\r\n\t\"type\": \"AdaptiveCard\",\r\n\t\"version\": \"1.0\",\r\n\t\"body\": [\r\n\t    {\r\n\t        \"type\": \"Image\",\r\n\t        \"size\": \"medium\",\r\n\t        \"url\": \"http://messagecardplayground.azurewebsites.net/assets/circleontransparentbackground.png\",\r\n\t        \"backgroundColor\": \"red\"\r\n\t    },\r\n\t    {\r\n\t        \"type\": \"Image\",\r\n\t        \"size\": \"medium\",\r\n\t        \"url\": \"http://messagecardplayground.azurewebsites.net/assets/circleontransparentbackground.png\",\r\n\t        \"backgroundColor\": \"blue\",\r\n\t        \"style\": \"person\"\r\n\t    }\r\n\t]\r\n}\r\n```\r\n\r\nThe above payload renders the same image on two different colors using the both supported image styles:\r\n![image](https://user-images.githubusercontent.com/1334689/31970430-c129c7b6-b8cc-11e7-88bd-20220326b77a.png)\r\n"}}
{"actor":{"display_login":"dclaux"}}