如何在容器后面添加背景图片

Question

我目前正在完成一项学校练习任务，但不知道如何在容器后添加背景图像。这是我快速找到的一个示例，注意背景图像：http://www.njuskalo.hr。我尝试将背景图像添加到body中，但也没有效果。我还创建了两个新的div标签（.left和.right）来尝试将其添加到容器的两侧，但也无效。以下是我的代码：http://textuploader.com/d5j5d。请注意，我更改和删除了许多内容以尝试其他方法。请原谅我的代码很混乱，因为我是临时完成的，所以请指出所有错误。

- Alen Nikolaus

---

好的，现在我感觉自己像个白痴...问题出在我的文件名上。我回到我的CSS文件中，在body的background-image中添加了.jpg后缀。然后图片就出现了... - Alen Nikolaus

你不能在容器前面添加背景。LOL - Ron.Basco

投票关闭此问题，因为它是由一个无法再现或简单的排版错误引起的问题。虽然类似的问题可能在这里是相关的，但这个问题已经以一种不太可能帮助未来读者的方式得到解决。 - Paulie_D

Answer 1

背景图片可以这样实现：

.container {
  background-image: url("../images/backgroundImageLocation.jpg");
}

body{
  background-image: url("http://image.flaticon.com/teams/1-freepik.jpg");
  background-repeat: repeat;
  background-size: 50px;
  }
.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  width: 200px;
  height: 200px;
  background-color: pink;
}
.left {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 200px;
  background-color: red;
}
.right {
  position: absolute;
  right: -100px;
  width: 100px;
  height: 200px;
  background-color: green;
}

  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

- Icewine

Answer 2

可以与背景一起使用：

    body, html {
        background: url("../YOUR_IMAGE_PATH/image.jpg") no-repeat fixed center center;
    }

no-repeat 不会重复背景，fixed 在滚动时将固定背景，center center 将图像居中到页面。

使用background-image属性：

body, html {
        background-image: url("../YOUR_IMAGE_PATH/image.jpg")
    }

- Blueblazer172