Pulling featured image as a background on Wordpress

Question

I'm trying to figure out how to pull the featured post image as a background (on Wordpress) but cannot get it to work. See below the code I'm using. $thumbimg should be pulling the featured image but obviously i am doing something wrong there.

            $lessons = get_posts( $args );

                        if( count( $lessons ) > 0 ) {

                            $html .= '<section class="module-lessons">';

                                $html .= '<header><h3>' . __( 'Lessons', 'sensei_modules' ) . '</h3></header>';
                                 $thumbimg = wp_get_attachment_image_src( get_post_thumbnail_id($lesson->ID), array( 200,200 ), false, '' );

                                $html .= '<ul>';

                                    foreach( $lessons as $lesson ) {
                                        $html .= '<li class="lesson-items" style="background: url(<?php echo $thumbimg[0]; ?>)>';
                                        $html .= '<a href="' . esc_url( get_permalink( intval( $lesson->ID ) ) ) . '" title="' . esc_attr( get_the_title( intval( $lesson->ID ) ) ) . '">' . get_the_title( intval( $lesson->ID ) ) . '</a>';

                                        $html .= '</li>';                                           

                                        // Build array of displayed lesson for exclusion later
                                        $displayed_lessons[] = $lesson->ID;
                                    }

                                $html .= '</ul>';

                            $html .= '</section>';

                        }

I cannot also seem to get the style="background.." to read the php as I would like to.

Answer 1

It will not work because you are getting the ID wrong. The code for the thumbnail should be something like:

wp_get_attachment_image_src( get_post_thumbnail_id($post_ID), 'large' ) ;

you are doing it right except for the fact that you are calling the $lesson->ID on an object $lesson that doesn't exist outside of the loop after it :)

Editing your code:

        $lessons = get_posts( $args );

                    if( count( $lessons ) > 0 ) {

                        $html .= '<section class="module-lessons">';

                            $html .= '<header><h3>' . __( 'Lessons', 'sensei_modules' ) . '</h3></header>';

                            $html .= '<ul>';

                                foreach( $lessons as $lesson ) {
                                    // This should be inside the loop
                                    $thumbimg = wp_get_attachment_image_src( get_post_thumbnail_id($lesson->ID), array( 200,200 ), false, '' );
                                    $html .= '<li class="lesson-items" style="background-image: url("'. $thumbimg[0] . '")>';
                                    $html .= '<a href="' . esc_url( get_permalink( intval( $lesson->ID ) ) ) . '" title="' . esc_attr( get_the_title( intval( $lesson->ID ) ) ) . '">' . get_the_title( intval( $lesson->ID ) ) . '</a>';

                                    $html .= '</li>';                                           

                                    // Build array of displayed lesson for exclusion later
                                    $displayed_lessons[] = $lesson->ID;
                                }

                            $html .= '</ul>';

                        $html .= '</section>';

                    }

As for the background in CSS, use background-image: url ()