Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Matt Lewis
Matt Lewis
5,970 Points

Fixed featured image position issue

Hello! I have an issue in my wordpress theme. I have a featured image being set as the header for each page. It works fine, but when I try to set it to a fixed position, it sets the image as the background instead of keeping it inside the initial container.

Here's the code from the template file:

    <?php if ( has_post_thumbnail() ): ?>
    <div class="featured-header">

            <?php the_post_thumbnail('featured_header',array('class' => "fullwidth"));  ?>
    </div>

    <?php endif; ?>

and here's the CSS associated with that:

.fullwidth

width: 100%;
display: block;
margin: auto;

.featured-header

width: 100%;
max-height: 20em;
overflow: hidden;
margin-top: 0;
margin-bottom: 80px;
position: relative;

Anyone have a suggestion? I'm trying to get the look where the image is fixed and the body scrolls up past it.

Thanks in advance!