背景图像未放置在页面内容后面答案

【问题标题】：Background image not being placed behind page content背景图像未放置在页面内容后面
【发布时间】：2018-06-03 03:27:22
【问题描述】：

我有这个用于 wordpress 主题的自定义页面模板的代码。背景图像不是作为背景，而是像普通图像一样被放置在内容下方。我已经尝试了以下链接中提到的所有内容，但没有任何效果How to place background image behind page content?

<?php /* Template Name: Kunst Page */ ?>
<html>
<head>

<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("http://www.caa-design.ch/wp-
content/uploads/2017/12/ohne-titel-modifiziert.jpg");

/* Full height */
height: 100%; 
/* Center and scale the image */
background-position: absolute;
background-repeat: no-repeat;
background-size: cover;

}

</style>
</head>

<body>

<div id="primary" class="content-area one column">
    <main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) : the_post();   
    the_content();
endwhile;

?>
<div class="bg"></div>
</body>
</html>

【问题讨论】：

标签： html wordpress image

【解决方案1】：

试试这个：

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

<img src="http://www.caa-design.ch/wp-
content/uploads/2017/12/ohne-titel-modifiziert.jpg" id="bg" alt="">

【讨论】：

【解决方案2】：

z-index 应该可以解决您的问题：

<?php /* Template Name: Kunst Page */ ?>
<html>
<head>

<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("http://www.caa-design.ch/wp-
content/uploads/2017/12/ohne-titel-modifiziert.jpg");

/* Full height */
height: 100%; 
/* Center and scale the image */
background-position: absolute;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}

</style>
</head>

<body>

<div id="primary" class="content-area one column">
    <main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) : the_post();   
    the_content();
endwhile;

?>
<div class="bg"></div>
</body>
</html>

body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://www.gravatar.com/avatar/3741d495ced91c057769a904b8ee6c26?s=48&d=identicon&r=PG&f=1");

/* Full height */
height: 100%; 
/* Center and scale the image */
background-position: absolute;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}

&lt;div class="bg"&gt;Some text&lt;/div&gt;

【讨论】：

【解决方案3】：

我用这个简单的代码修复了它：

<?php /* Template Name: Custom Page 2 */ ?>
<html>
<head>

<style>

html {
/* The image used */
background:url('http://www.caa-design.ch/wp-content/uploads/2017/12/ohne-
titel-modifiziert.jpg')no-repeat center center;

min-height:100%;
background-size:cover;
}

body {
min-height:100%;
}

</style>
</head>

<body>

<div id="primary" class="content-area one column">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) : the_post();   
the_content();
endwhile;

?>


</body>
</html>

【讨论】：