[Support request] Changing off canvas menu background image to use featured image

[JBD]

Hi,
Currently I use CSS to change the off canvas menu background image

.main-navigation.slideout-navigation {
        height: 100vh;
    background: url('/wp-content/uploads/2019/10/menu-back-2.jpg') no-repeat bottom right;
    background-size: cover;
    background-repeat: no-repeat;
}

Is there a way to use each pages “featured image” as the background image?

[David]

Hi there,

could give this a shot:

1. Create a new Hook Element, select the WP_head hook.
2. Add this content:

<?php
$page_id = get_queried_object_id();
if ( has_post_thumbnail( $page_id ) ) :
    $image_array = wp_get_attachment_image_src( get_post_thumbnail_id( $page_id ), 'full' );
    $image = $image_array[0];
    echo '<style type="text/css">
    .main-navigation.slideout-navigation {
        background-image: url(' . $image . ');
        background-size: cover;
        background-repeat: no-repeat;
    }
    </style>';
endif;
?>

3. Check execute PHP and set your display rules.

[Author]

Posts