JSON code on gallery card for background based on field is making cards disappear

Question

JSON code on gallery card for background based on field is making cards disappear

I have successfully changed the background color with this

"background-color": "'MistyRose'"

and successfully for alternating cards according to the post below, but no matter what field I use to try and make color change, the cards just disappear. I have verified the field names. Any help is greatly appreciated.

https://pnp.github.io/blog/post/how-to-change-the-background-color-of-cards-in-the-gallery-view/

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",

"height": 200,

"width": 254,

"hideSelection": false,

"fillHorizontally": false,

"formatter": {

"elmType": "div",

"attributes": {

"class": "sp-card-container"

},

"children": [

{

"elmType": "div",

"attributes": {

"class": "sp-card-defaultClickButton"

},

"customRowAction": {

"action": "defaultClick"

}

},

{

"elmType": "div",

"style": {

"background-color": "=if([$Title] == 'Sample item', 'MistyRose')"

},

"attributes": {

"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"

},

"children": [

{

"elmType": "div",

"attributes": {

"class": "sp-card-displayColumnContainer"

},

"children": [

{

"elmType": "p",

"attributes": {

"title": "[$Title]",

"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",

"role": "heading",

"aria-level": "3"

},

"txtContent": "=if ([$Title] == '', '–', [$Title])"

}

]

},

{

"elmType": "div",

"attributes": {

"class": "sp-card-displayColumnContainer"

},

"children": [

{

"elmType": "a",

"attributes": {

"title": "[$Link]",

"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-urlContent sp-card-keyboard-focusable",

"href": "[$Link]",

"target": "=if ([$Link] == '', '', '_blank')"

},

"style": {

"pointer-events": "=if ([$Link] == '', 'none', 'auto')",

"text-decoration": "=if ([$Link] == '', 'none', 'auto')"

},

"txtContent": "=if ([$Link.desc] == '', '–', [$Link.desc])"

}

]

},

{

"elmType": "div",

"attributes": {

"class": "sp-card-lastTextColumnContainer"

},

"children": [

{

"elmType": "p",

"attributes": {

"title": "=if ([$Posted.displayValue] == '', '–', [$Posted.displayValue])",

"class": "ms-fontColor-neutralPrimary sp-card-content "

},

"txtContent": "=if ([$Posted.displayValue] == '', '–', [$Posted.displayValue])"

}

]

}

]

}

]

}

}