Covering a div with an image

I'm writing a memory game, like concentration. Using jQuery, how do I cover over the square but no开发者_高级运维t lose the contents that are inside the div?

http://jsfiddle.net/zZzWw/

Markup

<div class="card">
     <div>Some Text brah</div>
     <img src="http://www.zombiegames.net/inc/images/Flaming-Zombooka-2.gif"/>
</div>

CSS

/* I set width and height to the same as the image */
.card{
     width: 70px;
     height: 70px;   
}

.card div{
     display:none;
}

JS

$(function(){
    $('.card').click(function(){
       $(this).children('div').toggle();
       $(this).children('img').toggle(); 
    });
});

Can just toggle between the 2 elements that are wrapped with a container element.

Try regular CSS. Put an image in the div with visibility:hidden. Use javascript to toggle to visibility:visible. Maybe set z-index as well.

Use CSS to fill the div with the original image being the background.

Then change the CSS to have the new background image.