• 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

Featured image as a full width background image

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 › Featured image as a full width background image

This topic is: resolved

Tagged: background image, body, featured image, No Sidebar

  • This topic has 5 replies, 2 voices, and was last updated 8 years, 7 months ago by Brad Dalton.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 10, 2016 at 2:38 am #195975
    gucu
    Participant

    Hi

    A couple of things please:
    1. Can I add some code to make the featured image display in pages on no-sidebar theme please? Currently the theme shows this:

    //* Add featured images
    add_image_size( 'ns-featured', 1024, 576, TRUE );
    add_image_size( 'ns-single', 1024, 400, TRUE );

    2. Also is it possible to set the featured image to display as a background image for each page please?

    I am starting to show my daughter some of WordPress and Genesis themes and how to make them do different things. She has asked me this as a question and I am reaching out for help.

    Thanks

    Rich

    http://abistudios.co.uk/
    November 10, 2016 at 4:07 am #195976
    Brad Dalton
    Participant

    Hi

    1. "display in pages". Do you mean before or after the single page entry title?

    Use this code with a conditional tag for single pages.

    if ( is_singular( 'page' ) )
    

    2. There are several tutorials already published showing you how to do this. The best method uses jQuery and PHP code.


    Tutorials for StudioPress Themes.

    November 18, 2016 at 8:06 am #196320
    gucu
    Participant

    Hi

    I have grabbed the featured image from the no-sidebar theme as per:

    add_action( 'genesis_entry_header', 'ns_single_featured_image', 1 );
    function ns_single_featured_image()

    And changed the hook to genesis_before. However, that simply places the image in a box . Do I need to do something with the css to get this then to fill the page background please?

    http://theme.gucu.org.uk/stuff/surfing/

    Thanks

    Rich

    November 18, 2016 at 8:18 am #196324
    Brad Dalton
    Participant

    I would use jquery for this with the body class.

    Take the code from a theme which includes backstretch and use that.


    Tutorials for StudioPress Themes.

    November 22, 2016 at 2:35 pm #196480
    gucu
    Participant

    Thanks for the all help. I have achieved it using backstretch.

    Rich

    November 23, 2016 at 3:09 am #196496
    Brad Dalton
    Participant

    Here's 2 solutions i spent a few hours working on. 1 uses backstretch and the other pure PHP.


    Tutorials for StudioPress Themes.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Featured image as a full width background image’ is closed to new replies.

CTA

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

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 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