CSS
.header2 { height: 500px; } /* Paralaxe */ .background-image { background-image: url('img/mandarine4.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } .parallax-container { overflow: hidden; }
HTML
<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="header2 background-image" style="background-image: url('<?php echo $backgroundImg[0]; ?>');"> <?php } else { ?> <?php $curdir = getcwd(); chdir(get_template_directory() . "/css/img/randomparalax/"); $files = glob("*.{gif,png,jpg,gif,JPG}", GLOB_BRACE); chdir($curdir); $file = $files[array_rand($files)]; ?> <section class="header2 background-image" style="background-image: url('<?php echo (get_bloginfo('template_url') . "/css/img/randomparalax/$file"); ?>')"> <?php } ?> <?php include('menu-top.php'); ?> </section><!-- / Bannière --> </div> <!-- Menu --> <?php } ?>