abnormal output of backgroundImages

[Ebmtranceboy]

Description
While trying to generate a linearGradient over an jpg image (both images able to be displayed independently), no image is displayed at all, and the browser inspector shows some garbled output [*]

To Reproduce
https://try.purescript.org/?gist=ef85fe9931bf17687a759706f697ef9b

Expected behavior
I expect to see the a linear gradient over the image.

Additional context
[*] in the minimal case above : "body { background-image: -webkit-, url("https://i.postimg.cc/j584FvRh/1.jpg")linear-gradient(top,hsl(0.0, 0.0%, 78.43%) 0.0%, hsla(0.0, 0.0%, 0.0%, 0.7) 100.0%); background-image: -moz-, url("https://i.postimg.cc/j584FvRh/1.jpg")linear-gradient(top,hsl(0.0, 0.0%, 78.43%) 0.0%, hsla(0.0, 0.0%, 0.0%, 0.7) 100.0%); background-image: -ms-, url("https://i.postimg.cc/j584FvRh/1.jpg")linear-gradient(top,hsl(0.0, 0.0%, 78.43%) 0.0%, hsla(0.0, 0.0%, 0.0%, 0.7) 100.0%); background-image: -o-, url("https://i.postimg.cc/j584FvRh/1.jpg")linear-gradient(top,hsl(0.0, 0.0%, 78.43%) 0.0%, hsla(0.0, 0.0%, 0.0%, 0.7) 100.0%); background-image: , url("https://i.postimg.cc/j584FvRh/1.jpg")linear-gradient(top,hsl(0.0, 0.0%, 78.43%) 0.0%, hsla(0.0, 0.0%, 0.0%, 0.7) 100.0%); height: 100.0vh }"