Adaptive Cards background image NodeJS - botframework

Question

I am rendering an adaptive card on a teams channel using Bot Framework. It renders the card fine, but the background image is different on a desktop client and mobile client. The first image shows the rendering on the desktop client and the second image is for the mobile client.
https://i.stack.imgur.com/mKl1z.png
https://i.stack.imgur.com/HAumI.jpg
Is there a way that I can change the way it renders on phone? Or add css to the Adaptive cards?
This is the JSON I've used to build the card:
{
$schema:"http://adaptivecards.io/schemas/adaptive-card.json",
type:"AdaptiveCard",
version:"1.0",
backgroundImage:"https://www.totalmortgage.com/images/claimed-blue.jpg",
backgroundImageMode:"stretch",
body:[
{
"type":"ColumnSet",
"columns":[
{
"type":"Column",
"items":[
{
"type":"TextBlock",
"size":"Large",
"weight":"bolder",
"text":"Application Offer",
"wrap":true,
"maxLines":0
}
]
},
]
},
{
"type":"TextBlock",
"size":"medium",
"text":"**New Lead has arrived:**",
"wrap":true,
"maxLines":0
},
{
"type":"ColumnSet",
"columns":[
{
"type":"Column",
"items":[
{
"type":"TextBlock",
"spacing":"small",
"size":"default",
"text":"**First Name** : ",
"wrap":true,
"maxLines":0,
"seperator":true
},
{
"type":"TextBlock",
"spacing":"small",
"size":"default",
"text":"**Last Name** : ",
"wrap":true,
"maxLines":0
}
]
},
]
},
{
"type":"TextBlock",
"spacing":"small",
"size":"default",
"text":"**Property State** : "+sfdata['property_state'],
"wrap":true,
"maxLines":0
}
]
};

Answer 1

Use version 1.1
{
"$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
"type":"AdaptiveCard",
"version":"1.1",
"backgroundImage": {
"url": "https://www.totalmortgage.com/images/claimed-blue.jpg",
"fillMode": "repeat",
"horizontalAlignment": "left",
"VerticalAlignment ": "center"
},
"body":[
{
"type":"ColumnSet",
"columns":[
{
"type":"Column",
"items":[
{
"type":"TextBlock",
"size":"Large",
"weight":"bolder",
"text":"Application Offer",
"wrap":true,
"maxLines":0
}
]
}
]
},
{
"type":"TextBlock",
"size":"medium",
"text":"**New Lead has arrived:**",
"wrap":true,
"maxLines":0
},
{
"type":"ColumnSet",
"columns":[
{
"type":"Column",
"items":[
{
"type":"TextBlock",
"spacing":"small",
"size":"default",
"text":"**First Name** : ",
"wrap":true,
"maxLines":0,
"seperator":true
},
{
"type":"TextBlock",
"spacing":"small",
"size":"default",
"text":"**Last Name** : ",
"wrap":true,
"maxLines":0
}
]
}
]
},
{
"type":"TextBlock",
"spacing":"small",
"size":"default",
"text":"**Property State** : ",
"wrap":true,
"maxLines":0
}
]
}
Check issue here:
https://github.com/Microsoft/AdaptiveCards/issues/477
PS: Your JSON Card has some invalid codes.
Always check in the Visualizer!