如何将页面背景图片放在内容上方

Question

如何将页面背景图片放在内容上方

3

我正在处理这个使用WordPress构建的网站，并试图将此图像设置为整个网站内容上方的固定左侧背景。

通过CSS我正在尝试这样做。

body { 
background-image: url("http://birsmatt.ch/de/wp-content/uploads/2016/04/bg_left.png"); 
background-position: left; 
background-repeat: no-repeat; 
z-index: 1; 
}

但是 z-index 不起作用。

有什么提示吗？

提前致谢。

- ScemuFessa

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3722860 · Accepted Answer

在网站中，整个内容都位于body标签内部。因此，如果设置了背景，它将出现在body标签内的所有内容后面。

您可以在body标签内创建一个新元素，并为其指定所需的背景颜色和大小。

例如：

#background {
  background-image:url('http://birsmatt.ch/de/wp-content/uploads/2016/04/bg_left.png');
  background-position:left;
  background-repeat:no-repeat;
  
  height:100%;
  width:100%;
  z-index:1;
  position:absolute;    /* make it overlap your website content */
}

<body>
  
  <div id='background'></div>
  
  <div id='rest of your content'>
    ...
  </div>

</body>