🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Set featured image as site header background

Home Forums Support Set featured image as site header background

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1131391
    Carlos

    Hello,

    I would like to know if it’s possible set the featured image of posts as site header background.

    My site header is positioned as sidebar, I use this css code for that:


    @media
    (min-width: 769px) {
    body {
    margin-left: 500px;
    }

    .site-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 500px;
    z-index: 300;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    transition: .1s ease;
    }
    }

    I’ve tried to do it with elements but it doesn’t work, the featured image it’s shown on the top instead of the sidebar.

    Currently, I’m using simple css plugin to set differents images as site header background, but it would be better set them automatically.

    Thank you.

    Generatepress 1.9.1

    #1131459
    David
    Staff
    Customer Support

    Hi there,

    lets give this a go. Use a Hook Element to add this to the WP_Header hook, make sure to set your display rules and check execute PHP.

    <?php
    // Get the featured image of current post
    $featured_img_url = get_the_post_thumbnail_url(get_queried_object_id(), 'full');
    
    // If featured image exists display as background
    if ( $featured_img_url ) {
        echo 
        '<style>
            #masthead {
                background-image: url("' . $featured_img_url . '");
            }
        </style>';
    }
    ?> 
    #1131472
    Carlos

    Wow, it works perfectly!

    Thank you so much, David.

    #1131636
    David
    Staff
    Customer Support

    Awesome – glad to be of help.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.