Jump to content

Archived

This topic is now archived and is closed to further replies.

bobleny

How can I controll images with CSS?

Recommended Posts

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
}

Share this post


Link to post
Share on other sites
[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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.