Forums » Themes and Templates » 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.