replacement for img tag

Question

How can I replace this tag:

<img src="images/username_t.png" />

to use CSS?

How can I show an image using CSS styles?

Answer 1

Html:

<div id="pic"></div>

CSS:

#pic {
    background-image: url('images/username_t.png');
    width: 100px; /* image width */
    height: 100px; /* image height */
    display: inline-block; /* so that it behaves like the img element */
}

For css, there are a few options dealing with background images, so check these out as well:

background-attachment
background-image
background-position
background-repeat
background-clip
background-origin
background-size