Question

我的层次结构如下：

├── static
│   ├── css
│   │   └── main.css
│   ├── img
│   │   └── main_bkg.jpg
│   └── js
└── templates
    └── index.html

在我的index.html中，我有以下代码：

<body>
<header> ... </header>
<div class="container"></div>
<footer> ... </footer>
</body>

在我的main.css文件中，我有

.container {
    background-image: url('../img/main_bkg.jpg');
}

这不会在我的索引页面中加载图像。但是，如果我将.container更改为body，那么它可以工作。所以我认为图像的路径没有问题。

我尝试使用

<div id="container"></div>

然后使用css选择器#container，仍然没有运气。

我在步骤中错过了什么？谢谢！

Answer 1

引用错误。它应该是：

.container {
    background-image: url("../img/main_bkg.jpg");
}

由于您有一个空容器，.container的高度为0.尝试添加min-height或padding以查看效果。这也可能引起问题。这可能会有所帮助：

.container {
  background-image: url("../img/main_bkg.jpg");
  min-height: 100px;
  height: 50px; /* Something */
}

Answer 2

由于.container没有任何height and width，因此它没有显示背景图片，而body可能有一些尺寸。

所以在css中添加样式为：

.container {
    background-image: url('../img/main_bkg.jpg');
    height: 100px;
    width: 100px
}

现在尝试它会显示图像。