I'm adding a featured image on my page through the dashboard and I want to use it as a background image on the container div of the page. I want to apply the background image through css, so I am thinking to put a style attribute inside my markup. I'm thinking to make something like this:

<div id="<?php echo $post_name; ?>" class="page<?php echo $post_id; ?>" style="background: url(<?php wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' ); ?>) !important;">

But unfortunately this is not working.

When I check the output is like this:

background: url() !important;

What is wrong with this ? Any suggestions? Thanks!

I'm adding a featured image on my page through the dashboard and I want to use it as a background image on the container div of the page. I want to apply the background image through css, so I am thinking to put a style attribute inside my markup. I'm thinking to make something like this:

<div id="<?php echo $post_name; ?>" class="page<?php echo $post_id; ?>" style="background: url(<?php wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' ); ?>) !important;">

But unfortunately this is not working.

When I check the output is like this:

background: url() !important;

What is wrong with this ? Any suggestions? Thanks!

• pages
• post-thumbnails
• custom-background

Share Improve this question edited Sep 27, 2013 at 17:09 agis asked Sep 27, 2013 at 16:49 agisagis 42155 gold badges1313 silver badges2525 bronze badges 2

• Have you already searched the site? – kaiser Commented Sep 27, 2013 at 16:53
• Yes I did a research but it seems to not work proper, I've updated my question, check now please! – agis Commented Sep 27, 2013 at 17:07

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 14

You need to echo the return value from wp_get_attachment_image_src(). It also returns an Array(), so you need to grab the needed part from that array. In this case it's the first/0 value. Example:

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div id="post" class="your-class" style="background-image: url('<?php echo $thumb['0'];?>')">
<p>your text demo</p>
</div>

Try to use the the_post_thumbnail_url function:

Gets the direct image URL for the featured image of the current post.

<div id="<?php echo post_name; ?>" class="page<?php 
echo $post_id; ?>" style="background: url(<?php 
echo get_the_post_thumbnail_url( $post_id, 'large' ); ?>) !important;">