I am brand new to using vanilla-extract/CSS and I have a rather straightforward question. I am attempting to apply a background image to the body of my HTML using vanilla-extract, but I am encountering issues as I keep getting a "failed to compile" error. I am working on developing a project site with Gatsby and I have installed the appropriate plugin for vanilla-extract in Gatsby. Other CSS properties seem to be functioning correctly except for the background image property. Below is the code snippet I am using:
import { globalStyle } from "@vanilla-extract/css"
globalStyle("body", {
margin: 0,
padding: 0,
backgroundImage: 'url("./background-main.png")',
WebkitFontSmoothing: "antialiased",
MozOsxFontSmoothing: "grayscale",
})
globalStyle("*", {
boxSizing: "border-box",
})
globalStyle("h1, h2, h3, p", {
padding: 0,
margin: 0,
})
My file structure looks like this:
├── README.md
├── gatsby-config.js
├── gatsby-node.js
├── src
│ ├── components
│ ├── pages
│ ├── colors.css.ts
│ ├── styles.css.ts
│ ├── theme.css.ts
| └── background-main.png
└── .env.EXAMPLE
I am also wondering how I can combine a background image with a linear gradient in vanilla-extract/CSS, similar to regular CSS syntax where you would use
background: linear-gradient(0deg, rgba(250, 221, 187, 0.95), rgba(250, 221, 187, 0.95)), url("./background-main.png");Thank you in advance.