Html 根据尖叫宽度重复或不重复beckground图像

我正在开发一个网页，遇到了一个问题。我有一个（可重复的）背景图像，在1200像素左右的屏幕上看起来不错，但在更宽的屏幕上（大于1600px+左右）就不太好了。我想根据屏幕宽度设置重复。怎样才能做到呢

---

谢谢大家!

如前所述，您应该在询问此类问题时提供代码。你需要：

---

如果不想使用css，可以知道组件渲染时的屏幕宽度。首先，按如下方式初始化状态：

 const [
        windowSize,
        setWindowSize,
    ] = useState({
        width: 0,
        height: 0,
    })

然后你也可以用它来听调整大小

useLayoutEffect(() => {
        const updateSize = () => {
            setWindowSize({
                ...windowSize,
                height: window.innerHeight,
                width: window.innerWidth,
            })
        }
        window.addEventListener(`resize`, updateSize)
        updateSize()
        return () => window.removeEventListener(`resize`, updateSize)
    }, [])

完成此操作后，状态将具有网页的内部宽度。因此，您可以使用useeffect来监听更改并相应地呈现所需的任何内容

useEffect(() => {
        if (windowSize.width > 1600) {
           // your code or logic here
        }
      
    }, [
       windowSize,
    ])

---

请分享你的代码你有什么样的背景图片。请分享。

useEffect(() => {
        if (windowSize.width > 1600) {
           // your code or logic here
        }
      
    }, [
       windowSize,
    ])