CODEWITHSUNDEEP
phpwordpressbackground-image
Paul Yorde
Paul Yorde

Reputation: 75

How to use featured image as background image in wordpress

mysite.com I would like to be able to allow the user of this twentytwelve child theme to be able to upload a featured image to a page (not post) and have that dynamically become the background image (positioned basically the way it is now-see thesite.com) I think it would need a dynamic url (like wp_get_attachment_thumb_url ), though I'm not using a loop. (was thinking that function has to be used inside a loop.

I am using the code below as a template part. This is what is generating the content on the front page. So basically, I need to get this featured image and use it as a background image for a templage part, and not inside a loop.

<?php $page = get_page_by_title ( 'Welcome' ); ?>

    <div id="welcome-intro" class="clear">

        <?php if ( get_the_post_thumbnail ( $page->ID ) ) : ?>

            <figure class="entry-page-image">
                <?php echo get_the_post_thumbnail ( $page->ID, 'full'); ?>
            </figure>

        <?php endif; ?>

        <article id="intro-elements">

            <div class="welcome-entry-content">

                <?php echo apply_filters( 'the_content', $page->post_content); ?>

            </div>

        </article>

    </div>

/* >>>>>>>>>>>>>>MODIFED<<<<<<<<<<<<<<< */

<?php
// welcome message ?>
<?php $page = get_page_by_title ( 'Welcome' ); ?>
<?php if ( $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ) ) : ?>

<div style="background: url('<?php echo $background[0]; ?>') top right no-repeat; height:400px;" id="welcome-intro" class="clear">

<?php endif; ?>

    <article id="intro-elements">

        <div class="welcome-entry-content">

            <?php echo apply_filters( 'the_content', $page->post_content); ?>

        </div>

    </article>

</div>`

Upvotes: 2

Views: 18762

Answers (1)

M Khalid Junaid
M Khalid Junaid

Reputation: 64466

You can do it in this way by using css 

$background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' );

<style>
body{
background-image: url('<?php echo $background[0]; ?>');
}
</style>

Upvotes: 12

Related Questions