Question

所以我目前正在做一项我在学校作为练习的小作业，但我不知道如何在容器后面添加背景图像。这是我想要实现的快速发现的示例，请注意背景图像http://www.njuskalo.hr。我尝试将背景图像添加到身体但这也不起作用。此外，我做了两个新的div标签（.left和.right）尝试将它添加到容器的两侧，也没有工作。这是我的代码：http://textuploader.com/d5j5d 还要注意我改变并删除了许多尝试其他事情的东西。请放心，我知道代码很乱，但这是我在最后一分钟所做的事情，所以随时指出所有的错误。

Answer 1

背景图像是这样完成的：

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

可与背景一起使用：

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

不重复不会重复背景，修复会在刻录时修正背景并且中心将图像居中到页面。

并使用background-image：

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

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

2 个答案: