Элементы фонового изображения сверху

Question

Мне была назначена задача создать страницу ошибки 404.php. Я только начал изучать все, и эта задача довольно сложная. До сих пор я successuflly:

• установить GitHub + атом
• клонировать репозиторий, содержащий код
• установить 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%; 
} 

Похоже это на LOCALHOST-странице:

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