bg hero

pages/index.vue

@@ -1,19 +1,7 @@
 <template>
   <div class="homePage">
     <section class="heroBox" aria-labelledby="hero-heading">
-      <NuxtImg
-        provider="strapi"
-        src="/uploads/DML_Home_Hero_4f27bc7f8e.webp"              
-        class="hero-bg"
-        format="webp"
-        sizes="100vw"
-        alt=""                  
-        aria-hidden="true"    
-        priority 
-        loading="eager" 
-        preload
-        fetchpriority="high"
-      />
+      
       <div class="container-10">
         <h1 id="hero-heading">{{ $t('home.heroBox.h1') }}</h1>
         <h2>{{ $t('home.heroBox.h2') }}</h2>
@@ -202,22 +190,19 @@ const canDoItems = [
 <style lang="sass">
 .homePage
   .heroBox
-    position: relative
+    background-image: url('https://strapi.digimedialoop.de/uploads/DML_Home_Hero_4f27bc7f8e.webp')
+    background-repeat: no-repeat
+    background-size: cover
+    background-position: right bottom
     min-height: 35rem
     height: 70vh
+    max-height: 200vw
     display: flex
     align-items: center
     justify-content: center
-    overflow: hidden           // wichtig: Bild beschneiden
-
-    .hero-bg
-      position: absolute
-      inset: 0                 // füllt Section komplett
-      width: 100%
-      height: 100%
-      object-fit: cover
-      object-position: center bottom
-      z-index: 0               // liegt unter Content
+    position: relative
+    @media (max-width: $breakPointMD)
+      background-position: center bottom
 
     .container-10, h1, h2, h3
       position: relative