8

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!

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

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>text demo</p>
</div>
  • Please explain why this should help the OP. Thanks. – kaiser Sep 27 '13 at 17:14
  • @kaiser was also working with backgrounds that way, I am newbie, do not know why, but I know it worked for what I saw in a forum. – Raank Sep 27 '13 at 17:22
  • @Feera Well, then it's Magic. And know that Magic always is the answer :D – kaiser Sep 27 '13 at 17:28
  • may be little, but what matters is the intention :P – Raank Sep 27 '13 at 17:31
  • 2
    If you're doing this in a function, don't forget to precede this code with global $post; . – ban-geoengineering Jan 15 '16 at 20:15
2

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;">

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.