Question

我有一个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>

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

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

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

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

背景图像没有放在页面内容后面

3 个答案: