How can I call a thumbnail/featured image to be a background image?

2 Views

I activated the post thumbnail by putting this in the functions.php:

add_theme_support( 'post-thumbnails');

Read More

And this in the loop.php:

<?php the_post_thumbnail('full', array ('class' => 'rollover')) ; ?>

And voila, the featured image appears on the main page, hopefully with the class of “rollover.”

But what I want to do is turn this into a sprite. On my static HTML markup I wrote: 

a.rollover: {
    display:block;
    width:300px;
    height:200px;
    text-decoration:none;
    background:url(images/oldtable.jpg);
    arollover:hover {background-position:-300px 0;
}

It works, but how do I make this dynamic (is that the word?) What do I substitute for the url so that the background url changes for each thumbnail? I tried this and it didn’t work:

background:url(<?php wp_get_attachment_image_src());

Can someone help? Thanks.

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. This is not a WordPress related, Anyway here is tip –

    You can not call a <?php .. ?> function into your style.css file. Instead set the background inline just as shown in this example, and apple styling.

    <div style="background: url('<?php wp_get_attachment_image_src(); ?>');">
   // blah blah ...
</div>

  2. you can use a trick 🙂

    create a css.php in your theme, and use <?php get_template_part('css'); ?>
    when you need in your templates.

    in your css.php you can use call to wp_get_attachment_image_src(), etc… define $vars for your colors (theme options) and so on…

  3. I could NOT get the sprite to work. I ended up using two separate images, positioning them on top of each other, and styling their opacity based on the rollover state.