How to convert this image tag to work using CSS on a div?

My image tag looks like:

<img src="/images/blah.gif" alt="blah" />

I want this t开发者_StackOverflow社区o work using CSS only, I tried this, but the image is not visible?

.blah
{
    background-image: url('/images/blah.gif') center center no-repeat #fff;    
}

What is wrong?

Probably, your div has no content, so it won't take up space.

You'd need to give the div the height and width of the image you are trying to display.

There is no way to auto-resize the div to the dimensions of the image, like the img element can.

An img tag is not a div tag. Try the following

<div style="background-image: url(../pathto/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">
Example of a DIV element with a background image
</div>

you need a div Tag, so:

<div class="blah"></div>

now your css code:

.blah
{
background: url('/images/blah.gif') 0 0 no-repeat;
//remember that if you have the image in a folder, the pat will start with: ../images
}