• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Styling Featured Image as a div background

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Styling Featured Image as a div background

This topic is: not resolved

Tagged: background div, code, featured image, front page

  • This topic has 5 replies, 4 voices, and was last updated 8 years, 11 months ago by warois.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 27, 2013 at 6:52 pm #42843
    Riavon
    Member

    As usual, I'm stuck on a PHP/code issue, after searching and trying different things for several hours I'm hoping a Genesis code guru can show me the (probably very simple) solution that's eluding me.

    I've successfully created a new page template that works fine to place the "Featured Image" where I want it before the content-sidebar-wrap using this:

    /*
    Template Name: Featured Image at Top
    */
    
    ///Add featured image at top of page */
    remove_action( 'genesis_after_post_title', 'the_post_thumbnail' );
    remove_action( 'genesis_before_post_title', 'the_post_thumbnail' );
    add_action( 'genesis_before_content_sidebar_wrap', 'the_post_thumbnail' );
    
    genesis(); 

    But, I need for the image to be placed as a background image inside a div "page-top-featured-image" which I've got styled in my CSS to background-size:cover so that the image takes up the full width of the 100% wide div. The way it is now of course just places the featured image at the actual image size. I've searched high and low and I've tried several different things, and I think I need to put something like

    <div style="background: url('<?php wp_get_attachment_image_src(); ?>');">

    in here somewhere, somehow. But I stink at PHP and coding, so unless I can find the exact thing I need, I get stuck. I'm sure it's so simple but after spending all day on this, my eyes are crossed. All I want to do is copy/paste the lines of code I need into this and get to work on the rest of the stuff on my list for this project.

    Any help is greatly appreciated!


    Twitter: @riavonentprises

    May 28, 2013 at 4:47 pm #42972
    cehwitham
    Member

    This is untested but add something like this to your template file. You'll want to remove your previous code and remove the add_action you mentioned above.

    `
    ID ) ){
    $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
    echo '';
    echo '#page-top-featured-image {';
    echo 'background-image: url(' . $image[0] . ');';
    echo '}';
    echo '';
    }
    }
    add_action( 'wp_head', 'background_featured_image');
    ?>
    `

    What this does it checks that the post has a featured image, then finds the image ID for the full size image then gets the URL of the full size image. Then it echos out style tags into the section of the page to set the background image of your div.

    Let me know how you get on and if you can provide a link, I'll check it. (it's late and I'm sleep deprived after 2 #WP10 meetups yesterday.

    NB: I've presumed you're Div has an ID of page-top-featured-image not a class of page-top-featured-image is this correct? If not amend the selector to a . instead of a #

    Chris


    Twitter: cehwitham Web: cehwitham.com

    May 28, 2013 at 4:49 pm #42973
    cehwitham
    Member

    The code tags seem to have messed it up a bit. I've pasted the code into a gist here:

    https://gist.github.com/anonymous/5666744


    Twitter: cehwitham Web: cehwitham.com

    May 29, 2013 at 5:33 am #43041
    Riavon
    Member

    Thanks so much for your help. It's especially appreciated knowing that you're sleep deprived! I plan to implement this later today, and when I do I will be sure to follow up to this post and let you know how it works out. 🙂


    Twitter: @riavonentprises

    February 9, 2014 at 9:53 am #89490
    amymasson
    Member

    Thanks for this! Was just what I was looking for!

    April 11, 2014 at 12:07 pm #99715
    warois
    Member

    Hello there,

    big thanks to cehwitham. I am stuck with a similar problem and thought I found the solution with the above mentioned code, but it doesn't seem to work for my problem without altering it.
    I am also trying to display the featured image as a background image, but on the front page for each post, not within the single post. A good example of this is the homepage of the theme "The Writer".
    I did find this approach by mattspaeth in this forum, but this creates a new div with the background instead of changing the background image of the existing one.

    After four days of trying and searching I am frustrated and hoping somebody could help me with this last step.

    Thanks a lot in advance!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble