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 2 replies, has 2 voices, and was last updated by  AVwordpress 2 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 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 );
    	}
    }
    #127167

    AVwordpress
    Member
    Post count: 2

    BRILLIANT!

    i’ve adapted this to be the background of entry-header, works great!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.