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

Question

I have this code for a custom page template for a wordpress theme. 我有此代码可用于wordpress主题的自定义页面模板。 The background image is not acting as background, but it is being placed below the content like a regular image. 背景图像不是作为背景，而是像常规图像一样放置在内容下方。 I have tried all that is mentioned on the following link but nothing worked 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>

Answer 1

Try This: 尝试这个：

 #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="">

Answer 2

z-index should solve your issue: 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; }

 <div class="bg">Some text</div>

Answer 3

I fixed it with this simple code: 我用以下简单代码修复了它：

<?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>

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

问题描述

3 个解决方案

解决方案1
0 2017-12-20 14:45:18

解决方案2
0 2017-12-20 14:46:43

解决方案3
0 已采纳 2018-01-05 10:36:02

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

问题描述

3 个解决方案

解决方案1 0 2017-12-20 14:45:18

解决方案2 0 2017-12-20 14:46:43

解决方案3 0 已采纳 2018-01-05 10:36:02

解决方案1
0 2017-12-20 14:45:18

解决方案2
0 2017-12-20 14:46:43

解决方案3
0 已采纳 2018-01-05 10:36:02