How can I controll images with CSS?

[bobleny]

I know I could spend an hour or two online and I'd probably find it, but this was easier.

How can I use CSS to display an image?

I was thinking something like this:

XHTML:
<img class="header" />

CSS:
img.header
{
  header.gif
}

[moberemk]

[code]<div class="flip">&nbsp;</div>[/code]

CSS:
[code].flip {
background-image: url(image_url);
}
.flip:hover {
background-image: url(image2_url);
}[/code]

Simple enough.

[bobleny]

Oh, I'm sorry, when I said change I ment I want the ability to change it. I just want to use css to display it.

I want to have to diffrent CSS files so If I use the first one, the top image is header.gif, but if I use the second file, I want the top image to be header2.gif.

Do you understand?

[makeshift_theory]

Just make two css files, one with the class as mentioned with the background-url attribute as header.gif
and the other css file make it with th eother background-url attribute.  Simple no?

[bobleny]

No, I don't want to change the background image. I know how to do that anyways...

I just want to change the shown images through out the site dictated by the CSS file the user has chosen.

[wildteen88]

The only way for CSS to display an image is by using the background-image style attribute. There is no other CSS attributes that can display an image AFAIK.

This is probably not a good idea to have but what you could do is have two image tags where one displays header1.gif and other displays header2.gif. Give them class names of header1 and header2

Now in the stylesheet you want to display header1.gif add this to it:
[code].header1 {
    display: block; /* this shows the image for header1 */
}
.header2 {
    display: none;  /*this stops the header2 image from displaying */
}[/code]
For the style you want to display header2.gif you use this:
[code].header1 {
    display: none; /*this stops the header1 image from displaying */
}
.header2 {
    display: block; /* this shows the image for header2 */
}[/code]
That way when the user switches stylesheet a different image will be shown for each style.

However using the background-image attribute is probably better.

[ToonMariner]

what he is trying to do is skin his site.

To that end makeshift provided (IMO) the best option to follow.

Just have multiple css files that you can switch between.

If Bobleny needs any inspiration go and look at css zen garden