How to set background image in vanilla-extract/css

Question

I am currently new to vanilla-extract/CSS and I have a relative simple question, I am trying to set background image to the body of my html using vanilla-extract and I cant get it right I am getting failed to compile error. I am building my project site on Gatsby and I have downloaded the right plugin for vanilla-extract in Gatsby and other CSS property are working well expect the background image property. Here is my code

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 is

├── 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 also want to know how can I combine the background image with liner gradient in vanilla-extract/CSS like in normal CSS eg. background: linear-gradient(0deg, rgba(250, 221, 187, 0.95), rgba(250, 221, 187, 0.95)), url("./background-main.png");

Thanks in advance.

score 0 · Answer 1 · answered Aug 21 '22 at 14:47

After some digging around this is what worked for me I installed file-loader $ npm install file-loader --save-dev then I created webpack.config.js and import-png.d.ts and included the code below

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
        options: {
          name: "images/[name].[ext]",
        },
      },
    ],
  },
}

and import-png.d.ts

declare module "*.png" {
  const value: any
  export default value
}

and all run as expected

How to set background image in vanilla-extract/css

1 Answers1