Insert featured image in div style background (Parallax effect)
-
Hi,
I’m using the following code to automatically insert a featured images as a style background.
<?php global $post; ?> <?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' ); ?> <div class="parallax" id="parallax1" style="background: url(<?php echo $src[0]; ?> ) !important; background-position: 50% 50% !important; background-repeat: no-repeat !important; bbackground-size: cover; background-attachement: fixed;"> <div class="parallax-content"> <h1 class="page-title"><?php printf( __( '%s', 'adventure' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1> <?php // Display optional category description $category_description = category_description(); if ( ! empty( $category_description ) ) echo '<div class="archive-meta">' . $category_description . '</div>'; get_template_part( 'loop', 'category' ); ?> </div> </div>
Styles:
div#parallax1.parallax { background-attachment: fixed; } #parallax1 { background-size: cover; background-position: 50% 50%; width: 100%; display: table; background-repeat: no-repeat; } .parallax-content { width: 100%; margin: 0 auto; vertical-align: middle; text-align: center; display: table-cell; color: #fff; text-shadow: 0 1px 0 #424242, 0 0 5px #424242; height: 600px; } .parallax-content-page { background-color: #424242; height: 400px; } .parallax-content h1 { font-size: 72px; font-family: Roboto-Bold, sans-serif; text-decoration: underline; margin: 0; } .parallax-content p { font-size: 28px; font-family: Roboto-Light, sans-serif; margin: 0; }
This works well, but my parallax effect isn’t working.
The culprit is the background-attachment: fixed; style. It just keeps getting ignored.
Everything works fine if I manually add a the image as a background to the #parallax1 element in my stylesheet, but when it’s dynamically inserted inline the background-size, position, repeat, and background-attachement are all ignored or overwritten.
Any ideas?
- The topic ‘Insert featured image in div style background (Parallax effect)’ is closed to new replies.