Viewing 1 replies (of 1 total)
  • Hi @mapohl

    Gazette places the Featured Image as an actual tag, and not a background image, so it would take a bit of customization to make it fixed.

    You could create a child theme to keep your modifications safe in the event of a theme update, and create a modified copy of the theme’s content-single.php and content-page.php file (for single posts and pages, respectively).

    Then you’ll locate the call for the featured image, which looks like this:

    <div class="post-thumbnail">
    	<?php the_post_thumbnail( 'gazette-single-thumbnail' ); ?>
    </div>
    

    Once you’ve found that, we can remove the current image and add the featured image as a background to that post-thumbnail element, like so:

    <div class="post-thumbnail" style="background-image:url('<?php  the_post_thumbnail_url( 'gazette-post-thumbnail' )?>')"></div>
    

    If you load the page now, it won’t look right, but don’t worry, we aren’t done yet ??

    Now that we have the background image in place, we can use some custom CSS (either in your child theme, using a plugin like Jetpack or with the built in CSS in WordPress 4.7’s Customizer) to do a few different things:

    1. Set the image to cover the available space
    2. Set it to scroll the way you’ve asked
    3. Set the height (since we’ve removed the original image that was doing that for us)

    .single .post-thumbnail,
    .page .post-thumbnail {
      background-size: cover;
      background-attachment: fixed;
      height: 500px;
    }
    

    The 500px height is up to you, and can be adjusted. You could also use media queries if you wanted different heights for different screen sizes.

    Give the above a try, and let me know how it looks!

Viewing 1 replies (of 1 total)
  • The topic ‘fixed header when scrolling down’ is closed to new replies.