I'm using Headway Theme (builder) and I've got static pages for products. On top of page is a wrapper that I'd like to use the featured image as background.

Everything I've read is that I need to use

$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );

and in my css apply to that wrapper the following:

background-image: url('<?php echo $thumb['0'];?>')

The problem I guess is that I am not applying php at the good place. I have inserted it in the functions.php, is it where it is supposed to be? I've read that it should go in The Loop, but can't find anything like this...

  • I have no knowledge of your theme but you can learn more regarding The Loop in The Codex. You may also want to get familiar with Page Templates. This would be easier if you knew the ID but since it's page specific you'll need to be in The Loop. Maybe contact a developer or the theme developers ( since it seems to be a premium theme ). – Howdy_McGee Dec 28 '15 at 15:03
  • yes, its need to be in The Loop or if you want it for single page. Then print this on the particular page with that particular page ID – WPTC-Troop Dec 28 '15 at 15:21
  • That famous loop, is it the code itself I need to write into functions.php? In my theme I have my block, where I need my background, that I can style as I wish. – Mathieu Bourret Dec 28 '15 at 20:54
  • It is impossible to give an answer without access to your theme, you need to show the relevant code in order for people to be able to give any useful comments about it, – Mark Kaplun Dec 29 '15 at 3:53

Here is the example inside a loop. Maybe yours looks a little different but essentially where you find have->posts() you'll see a loop. In this block I just created a div and set the style to use the featured image as the background.

// WP_Query arguments
$args = array (
    'numberposts' => -1

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {

        // get the featured image

        $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );

        if( empty( $thumb ) ) continue;

        $thumb_src = $thumb[0];
        $thumb_width = $thumb[1];
        $thumb_height = $thumb[2];

        // apply the background image as a style on a div

        echo "<div style=\"width: {$thumb_width}px; height:{$thumb_height}px; background-image: url('{$thumb_src}');\" ></div>";
} else {
    // no posts found

// Restore original Post Data

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.