<template>
    <div class="parallax-wrapper">
      <div
        class="jarallax"
        ref="parallaxEl"
        data-speed="0.5"
      >
        <div class="jarallax-img" style="background-image: url('https://ritzenbergen.de/Fotos/erntefest2011.jpg');">

        </div> 
        <div class="container content cid-u6k7q0zosO">
          <slot></slot>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { jarallax } from 'jarallax';
  import 'jarallax/dist/jarallax.css'; // optional, falls du Styles möchtest
  
  export default {
    name: 'ParallaxSection',
    mounted() {
      jarallax(this.$refs.parallaxEl);
    },
    beforeDestroy() {
      jarallax(this.$refs.parallaxEl, 'destroy');
    },
  };
  </script>
  
  <style scoped>
  .parallax-wrapper {
    overflow: hidden;
  }
  
  .jarallax-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
  }
  
  .container {
    position: relative;
    z-index: 1;
    padding: 100px;
    text-align: center;
  }
  slot{
    width: 100%;
    height: 100%;
  }
  </style>
  