Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Set backgroundImage's fillMode to 'repeat' doesn't make it cover the whole area.

See original GitHub issue

Platform

What platform is your issue or question related to? (Delete other platforms).

Author or host

Host

Version of SDK

AdaptiveCards.Redering.Uwp 3.0.2

Issue

I want to use an image to fill the whole background of my adaptive card. By setting ‘fillMode’ to ‘repeat’, I assume no matter the how small the image is, it will cover the whole area of the adaptive card. But seems this is not true. The image only cover part of the area.

Here is the template and data.

        const string templateJson = @"
{
    ""type"": ""AdaptiveCard"",
    ""version"": ""1.5"",
    ""backgroundImage"": {
            ""url"": ""${BackgroundImageUrl}"", 
            ""fillMode"": ""repeat""
            },          
    ""body"": [
        {
            ""type"": ""Container"",                      
            ""verticalContentAlignment"": ""bottom"",  
            ""items"": [
                {
                    ""type"": ""Container"",
                    ""backgroundImage"": {
                        ""url"": ""${BackgroundImageUrl2}"", 
                        ""fillMode"": ""repeat""
                        },                    
                    ""items"":[
                        {
                        ""type"": ""TextBlock"",
                        ""text"": ""${Name}"",  
                        ""size"": ""medium"", 
                        ""wrap"": true, 
                        ""maxLines"": 2,
                        ""horizontalAlignment"": ""center""
                        }
                    ],
                    ""bleed"": true
                }
            ],
            ""height"":""stretch"",
            ""spacing"": ""none""
        }
    ],
    ""selectAction"": {
                ""type"": ""Action.OpenUrl"",
                ""url"": ""${Url}""
            },
    ""$schema"": ""http://adaptivecards.io/schemas/adaptive-card.json"",
    ""minHeight"": ""200px"",
    ""verticalContentAlignment"": ""top""
}";

var myData = new
            {
                Name = "hello world",
                Url = "https://office.com",

                // This iamge has larger dimension 
                //BackgroundImageUrl = "https://neonstorage1.blob.core.windows.net/adaptivecardresources/orange.png",

                // This image has smaller dimension
                BackgroundImageUrl = "https://neonstorage1.blob.core.windows.net/adaptivecardresources/green.png"
            };

Here is the rendering result:

Issue Analytics

State:
Created 2 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

lcmsftcommented, Feb 24, 2022

@beervoley You are right. Sorry I didn’t notice it before.

0reactions

lcmsftcommented, Feb 24, 2022

@beervoley Yes, you are right. I think it is because the card’s height is smaller.

Top Results From Across the Web

background image not taking up full width

Just add background-size: cover code in css will resolve the issue. .background { background-image: url(some image); background-size: cover; ...

background-repeat - CSS: Cascading Style Sheets | MDN

The image is repeated as much as needed to cover the whole background image painting area. The last image will be clipped if...

Trouble aligning repeating background image - HTML & CSS

Hi, repeating on a background image doesn't quite work that way, you may tell it to start 758px (or w/e the number was)...

Background image height problem - not fitting to the screen

The background image is filling the screen from left to right, but up and down it doesn't and therefore when I adjust the...

CSS background-repeat property

The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.