HTML :
<section class="background_container">
<div class='background_animation'>
</div>
<div class='text'>
<figure>
<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 301.1 185.2">
<style>.st0{fill:#1e1e1c}</style>
</svg>
</figure>
</div>
</section>
CSS :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
.background_container {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.background_animation {
-webkit-animation: 40s linear infinite background_animation;
animation: 40s linear infinite background_animation;
width: calc(100% + 511px);
height: calc(100% + 849px);
background-image: url("img/pat1.jpg");
-webkit-transform: translate3d(-511px, -849px, 0);
transform: translate3d(-511px, -849px, 0);
}
@-webkit-keyframes background_animation {
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes background_animation {
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.text {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 10vmin;
}
