How to use PNG, IMG file as background image? and can I add some css to animate effect on page?

[AppleBoiy]

Is there any way to use png as background? and is it possible to add some effect at background by using css

This is my current page

This is my expectation

from my expected image I have a background image (.PNG) and I want to add smoke effect by using css. is it possible?

[arno-fukuda]

You could wrap your mdx page in a Background component.

1. add png or svg to /public/

2. Create component

// Background.js
import React, { useState, useEffect } from "react"
import { useTheme } from "nextra-theme-docs"

const Background = ({ children }) => {
  const { resolvedTheme } = useTheme()
  const [backgroundImage, setBackgroundImage] = useState("")

  useEffect(() => {
    setBackgroundImage(
      resolvedTheme === "dark"
        ? "background/background_dark.svg"
        : "background/background_light.svg",
    )
  }, [resolvedTheme])

  return (
    <>
      <div
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          zIndex: -1,
          backgroundImage: `url('${backgroundImage}')`,
          backgroundSize: "cover",
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center",
          filter: "blur(6px)",
        }}
      />
      {children}
    </>
  )
}

export default Background

3. Wrap your mdx page in it:

// index.mdx
import Background from 'components/Background'

<Background>

# Documents
...

</Background>

For animation, you can use an APNG or an svg from here as an example.

[AppleBoiy]

Thanks a lot!