ajouter une fois de plus une image d’arrière-plan personnalisée dans wordpress

J’ai activé les arrière-plans personnalisés pour mon thème wordpress comme ceci :

add_theme_support('custom-background', array(
    'default-color' => 'FFF',
    'default-image' => get_template_directory_uri() . '/img/bg.jpg'
));

Ensuite, je saisis la classe « .custom-background » du corps, car je souhaite modifier la taille de l’arrière-plan :

body.custom-background {
    background-attachment: fixed!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}

La seule raison pour laquelle je l’ai positionné en absolu est que je souhaite ajouter un autre arrière-plan avec les mêmes propriétés d’arrière-plan mais avec une largeur de 1000px et une marge centrée (0 auto) pour brouiller cette section avec des filtres css :

body.custom-background:before {
    content: "";
    background-image: url(""); //here he should takes the custom background-image (of body.custom-background)
    background-attachment: fixed!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    height: 100%;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 1000px;
    position: fixed;
    z-index: -1;
    filter: blur(10px);
}

Mais bien sûr, wp ne sait pas quelle est l’image d’arrière-plan… Alors, comment puis-je résoudre ce problème – qu’il ramène à nouveau l’image d’arrière-plan personnalisée au sélecteur :before ?

En espérant que vous avez compris ce que je veux dire.

Solution n°1 trouvée

Vous pouvez écrire le code suivant dans header.php

<?php $background = set_url_scheme( get_background_image() ); ?>
<style>
  body.custom-background:before {
  content: "";
  background-image: url("<?php print $background; ?>");
  background-attachment: fixed!important;
  background-position: center center!important;
  background-repeat: no-repeat!important;
  background-size: cover!important;
  height: 100%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 1000px;
  position: fixed;
  z-index: -1;
  filter: blur(10px);
 }
</style>

Cela fonctionnera…