Possible to make Featured Image display as a background image?

Community Forums Forums Design Tips and Tricks Possible to make Featured Image display as a background image?

This topic is: not resolved

This topic contains 1 reply, has 1 voice, and was last updated by  mattspaeth 8 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #84812

    mattspaeth
    Participant
    Post count: 11

    I am trying to make the Featured Image of a post display as a background image so I can use the background-size: cover CSS property to get it scale nicely. Is this possible? Since you can’t pass variables to a stylesheet I am not sure how it could be done.

    The reason I want to do this is that I have banner images in other areas of the size using the background images and background-size: cover. The Featured Image on the posts looks good at full width but when you scale it down, it doesn’t behave nicely like the background images do.

    #84815

    mattspaeth
    Participant
    Post count: 11

    I just figured it out. It works great! Here it is in case anyone else wants to do it:

    // Add Post featured image as a background image above post title, single posts only 
    add_action( 'genesis_after_header', 'custom_before_post_image');
    function custom_before_post_image() {
     
      if ( is_page() ) return;
      if ( is_home() ) return;
    
    	if ( $image = genesis_get_image( 'format=url&size=post-image' ) ) {
    		printf( '<div class="post-featured-image"><div class="post-photo" style="background-image: url(%s);"></div></div>', $image );
    	}
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.