顶部的背景图像元素

Question

我被分配了创建 404.php 错误页面的任务。我刚开始学习一切，这项任务非常困难。到目前为止，我已经成功：

• 设置 github + atom
• 克隆包含一些代码的存储库
• 设置 MAMP + Wordpress 并让数据库正常工作
• 试图组织所有术语并尽量不混淆它们

我从头开始基本上所有东西都只有 4 天。

我设法将此代码放入 404.php：

> <?php
/**
 * The template for displaying 404 pages (Not Found).
**/

get_header(); ?>
<div id="bg">
     <img src="<?php echo get_bloginfo('template_directory'); ?> \img\Free-Chalkboard-Backgrounds.jpg" alt="background">
</div>
<header class="entry-header">
<center>
<h1 class="entry-title">404 - Not found</h1>
</center>
</header>

<article id="post-0" class="post error404 no-results not-found">
<div class="entry-content">
<p><big>404 - Die Seite konnte nicht gefunden werden.</big></p>
            <?php get_search_form(); ?>
          <!--   <img class="img-responsive" src="<?php echo $logoUrl; ?>" alt="Logo - <?php echo get_bloginfo('name'); ?>">  -->
          <center><img src="<?php echo get_bloginfo('template_directory'); ?> \img\internet-error-404-file-not-found.jpg" alt="404 not-found"  />
          </center>
        </div>
<!-- .entry-content -->
    </article>
<!-- #post-0 -->
<footer>


   <ul class="list-inline Impressum">
     <li> <a href="https://www.th-nuernberg.de/seitenbaum/impressum/page.html" target="blank">
       <alt=>Impressum</a> </li>
       <li> |
       </li>
     <li> <a href="https://www.th-nuernberg.de/institutionen/hochschulkommunikation/ohm-shop/agb/page.html" target="blank">
       <alt=>AGB</a> </li>
       <li> |
       </li>
     <li> <a href="https://www.th-nuernberg.de/institutionen/language-center/ueber-uns/page.html" target="blank">
       <alt=>Über uns</a> </li>
   </ul>


</footer>

<?php get_footer(); ?>

这是css：

#bg {
  position: fixed;
  top: -64%;
  left: -55%;
  width: 200%;
  height: 200%;
}
#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 55%;
  min-height: 55%;
}

在本地主机页面上看起来像这样：

preview of 404

如何使其他元素位于背景之上？我读了几个答案，但我现在很困惑，我需要一个具体的提示来说明我的情况。 提前感谢您的帮助！

Answer 1

如果我理解正确，你的背景现在重叠了吗？ 我认为您正在搜索的属性称为 z-index。

你可能需要做类似的事情

    #bg{
      z-index: -1;
     }

more info about z-index

Answer 2

试一试...

<?php
/**
 * The template for displaying 404 pages (Not Found).
**/

get_header(); ?>
<div id="bg">
     <img src="<?php echo get_bloginfo('template_directory'); ?> \img\Free-Chalkboard-Backgrounds.jpg" alt="background">
</div>
<header class="entry-header">
<center>
<h1 class="entry-title">404 - Not found</h1>
</center>
</header>

<article id="post-0" class="post error404 no-results not-found">
<div class="entry-content">
<p><big>404 - Die Seite konnte nicht gefunden werden.</big></p>
            <?php get_search_form(); ?>
          <!--   <img class="img-responsive" src="<?php echo $logoUrl; ?>" alt="Logo - <?php echo get_bloginfo('name'); ?>">  -->
          <center><img src="<?php echo get_bloginfo('template_directory'); ?> \img\internet-error-404-file-not-found.jpg" alt="404 not-found"  />
          </center>
        </div>
<!-- .entry-content -->
    </article>
<!-- #post-0 -->
<footer>


   <ul class="list-inline Impressum">
     <li> <a href="https://www.th-nuernberg.de/seitenbaum/impressum/page.html" target="blank">
       <alt=>Impressum</a> </li>
       <li> |
       </li>
     <li> <a href="https://www.th-nuernberg.de/institutionen/hochschulkommunikation/ohm-shop/agb/page.html" target="blank">
       <alt=>AGB</a> </li>
       <li> |
       </li>
     <li> <a href="https://www.th-nuernberg.de/institutionen/language-center/ueber-uns/page.html" target="blank">
       <alt=>Über uns</a> </li>
   </ul>


</footer>

<?php get_footer(); ?>

CSS

.bg-img {
  background-position: right 45px bottom;
}

#bg {
  position: fixed;
  top: -64%;
 background-position: top center;
  left: -55%;
  width: 200%;
  height: 200%;
}
#bg img {
  position: absolute;
  top: 0;
 background-position: top center;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 55%;
  min-height: 55%;
}