PHP
<header>
<div class="parallax-container">
<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?&<!-- get the thumbnail url -->
<?php if (has_post_thumbnail()) { ?>
<section class="header background-image" style="background-image: url('<?php echo $backgroundImg[0]; ?>');">
<?php } else { ?>
<section class="header background-image" style="background-image: url('<?php echo get_template_directory_uri(); ?>/css/img/random/ran.svg')">
<?php } ?>
<?php include('menu-top.php') ; ?><!-- Menu -->
</section><!-- / Bannière -->
</div>
</header>
<!-- alerte-->
<div class="buttons has-addons is-centered">
<a class="button" href="tel:+33xxxxxxxxx" title="Communication directe">
<span class="icon"><i class="fas fa-phone" aria-hidden="true" title="téléphone"></i></span>
<span>05 49 00 00 00</span>
</a>
<p> Contactez-nous !</p>
</div>
<!-- / alerte-->
<main class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-8">
<?php echo the_breadcrumb() ?>
<article>
<?php get_template_part('content') ?>
</article>
</div>
</div>
</div>
</main>
CSS-JS
<!-- CSS -->
<style type="text/css">
.background-image{
background-image : url('https://images5.alphacoders.com/701/701401.jpg'); /*place holder*/
background-size : cover;
background-position : center;
}
.parallax-container{
overflow: hidden;
}
</style>
<!-- JS -->
<script>
window.addEventListener('scroll', () => {
let scrolled = window.pageYOffset;
let parallax = document.querySelector(".background-image");
let coords = (scrolled * 0.4) + 'px';
// effet ajustable en modifiant la valeur 0.x
parallax.style.transform = 'translateY(' + coords + ')';
});
</script>