CSS背景图片无法显示问题求助

我现在正试着给页面添加背景图片，但怎么都显示不出来，折腾了好几种方法都没用，想请教下大家哪里出问题了。

我的index.html内容如下：

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/styles/main_style.css">
    <title>HTMX Demo Javascript Web-App</title>
</head>
<body>

</body>
</html>

对应的CSS文件内容是这样的：

body {
    width: 100%;
    margin: 0 auto;
    background-image: url(/images/background.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
}

项目的文件结构如下（index.html在根目录）：

index.html
styles
   -- main_style.css
images
   -- background.jpg

我已经试过这些方法，但都没效果：

• 尝试过URL里带空格和不带空格的写法
• 尝试过用单引号、双引号，甚至不加引号的写法
• 试过好几种不同的URL路径：

  url('images/background.jpg');
  url('/images/background.jpg');
  url('../images/background.jpg');
  

不管是用WebStorm运行项目，还是直接打开本地的index.html文件，背景图都不显示。但如果我直接在浏览器地址栏输入file:///C:/Users/tom/git/htmx-demo-frontend-javascript/images/background.jpg，是能正常看到这张图片的。

备注：内容来源于stack exchange，提问作者tjholmes66