Farooq Ahmad Farooq Ahmad - 1 year ago 207
CSS Question

add the_post_thumbnail as CSS Background, in wordpress theme

I am trying to set my feature image as a background image in css.
Need to show same feature image at two places in html and css...

how to set the_post_thumbnail() query in CSS??


<div class="magnify">
<div class="large"></div>
<img class="small" <?php the_post_thumbnail( 'large', array
('class' =>'img- responsive') ); ?> />


.large {background: url('img/image.jpg') no-repeat;}

Answer Source

As Tim Malone stated in the comments, you will need to do this with inline styles. You can do something like this:

$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large');

<div class="large" style="height:<?php echo $thumbnail[2]; ?>px;background-image:url(<?php echo $thumbnail[0]; ?>);background-repeat:no-repeat;"></div>

Note that I am using wp_get_attachment_image_src so that I can get the image dimensions in case I need them. In this case, it is to set the height of the div to the height of the image.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download