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

Question

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

add_theme_support( 'post-thumbnails');

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.

Answer 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>

Answer 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...

Answer 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.