Sp-dev-docs: Column formatting - url not allowed in background-image style property

[Smilebags]

Category

• [ ] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

Observed Behavior

It seems using ( and " inside of a style value is not allowed, making setting background images impossible. It would be nice to be able to use custom resources for backgrounds of elements.
The expected syntax for setting a background image is the following: background-image: url("/path/to/resource.jpg")

Steps to Reproduce

Using the following code as the style section of a span (with debugMode set to true) it gives an error of "Failure: The style values 'url('/site/Shared Documents/imageName.jpg')' contains one or more of the following disallowed characters ( : & ; ! ."

"style": {
                "display": "inline-block",
                "width": "8px",
                "height": "8px",
                "background-image": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": "==",
                            "operands": [
                               "@currentField",
                               "expectedValue"
                            ]
                         },
                        "url('/site/Shared Documents/imageName.jpg')",
                        ""
                        ]
                }
            }

[thechriskent]

This is correct. Currently style properties cannot have any of the following characters: (, :, &, ;, !

However, there is one exception and that is the use of the rgba css function:

[krisbugbee]

Are there any workarounds for this? I'd like to be able to use linear-gradient for background color to show a color trend.

[stevish-com]

This definitely seems strange. Why accept a 'background-image' declaration without allowing the url for the image? Why even have it?

[furler]

Is there any update on this or any more information? It's in the specs that "background-image" is allowed, but what's the point if you can't do it because ( ) isn't allowed in style? It's especially weird that rgba() background colors are allowed.

[shagra-ms]

@furler This is not a supported usage. We will update the specs. Thanks for reporting this.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues