<style>
.parallax {
background-image: url("HierdeinBild.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
//Gezackte Linie, Quelle: https://blog.kulturbanause.de/2012/10/zick-zack-linien-mit-css3
#demo {
width: 100%;
height: 150px;
position: relative;
background: #045B76;
}
#demo::before {
content: '';
position: absolute;
bottom: -30px;
left: 0;
right: 0;
height: 60px;
background-size: 24px 48px;
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(45deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%), -webkit-linear-gradient(315deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%);
background-image: -moz-linear-gradient(45deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%), -moz-linear-gradient(315deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%);
background-image: linear-gradient(45deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%), linear-gradient(315deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%);
}
</style>
<body>
<div id="demo" style="">
Hier kann noch mehr text hin
</div>
<div class="parallax"></div>
