Wie erreicht man den Hintergrund hier?

1. Bild hochladen. In den Beispielen wird eine Abmessung von 1620x540px genutzt.
2. Produktkarrusell an gewünschte Position auf der Seite setzen
3. Darunter einen Expertenbaustein mit folgendem Code setzen: 

<style>
/* Vollbreiter Hintergrund auf der bestehenden Section (minimal) */
#main-content > div > div > div > div:nth-child(4) > section{
 position:relative; z-index:0;
 color: white;
padding-top: 10rem;
padding-bottom: 15rem;
margin-top: -3rem;
}
#main-content > div > div > div > div:nth-child(4) > section::before{
 content:"";
 position:absolute; top:0; bottom:0;
 left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;
 z-index:-1;
 background:
   linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45)),
   url("https://v91-prod.zeitfracht.digital/wcsstore/3105181/uploads/Zenbanner.jpg?q=80&w=2000&auto=format&fit=crop")
   center/cover no-repeat;
}

#main-content > div > div > div > div:nth-child(4) > section > div.flex.items-center.mb-6.sm\:mb-12.gap-1.justify-between {
background-color: #00000000 !important;

}

#main-content > div > div > div > div:nth-child(4) > section > div.flex.items-center.mb-6.sm\:mb-12.gap-1.justify-between > h2 {
font-size: 1.8rem !important;
}

</style>

<!-- SCHICKER, EINFACHER BUTTON -->
<a href="/content/NIKrimi" class="k-simple-btn">Produktbackground</a>

<style>
 .k-simple-btn {
   display: inline-block;
   font-family: "Poppins", Arial, sans-serif;
   font-weight: 600;
   font-size: 18px;
   color: #fff;
   background: #4B6D5D;
   border: none;
   border-radius: 999px;
   padding: 14px 36px;
   text-decoration: none;
   transition: all 0.25s ease;
   width: 300px;
   text-align: center;
   margin-top: -15rem;
   z-index: 99;
 }

 .k-simple-btn:hover {
   background: #5d8573;         /* etwas helleres Grün beim Hover */
   transform: translateY(-2px); /* leichtes Anheben */
   box-shadow: 0 6px 16px rgba(0,0,0,0.2);
 }
</style>
 

• Kopieren sie den kompletten Code und fügen diesem in den HTML-Expertenbaustein ein. 
   
• Alle fett markierten Stellen müssen individualisiert werden. 
   
• Die Zahl muss der Position des Produktkarussels sein, das heißt je nachdem wie viele Baustein vorangestellt sind, erhöht sich die Zahl im Code. 
  
  Bei Rückfragen nutzen Sie bitte gerne die Chatfunktion hier im Infoportal und geben Ihre E-Mailadresse und VKN an.