Adaptive Cards background image NodeJS

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
      }
   ]
};

Can you include the JSON for the card? and on mobile is the Android or iOS? You cannot add CSS to adaptive cards, but we can look into why it's rendering differently — Matt Hidinger
I've added the JSON for the card. It renders the same on iOS and Android. — Pratik Mathur

Luiz Vaz Luiz Vaz · Accepted Answer · 2019-07-11T03:19:16

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!

Adaptive Cards background image NodeJS

1 Answers