I give up!! Help with CSS and images please!!

[Deanna475]

I've been all over the web and all over this forum looking for an answer and I can't find it. I'm hoping someone at CF can help. I want to put an image class into an external style sheet so that I can change the entire colour scheme of my page by "swapping" or substituting style sheets on the click of a button. Only problem is, I need to "swap" one image as well. This is what I'm doing but of course it's not working:

In the style sheet itself:

.scrollbar_graphic {
url(images/scrollbar_blue.gif);
height=238px;
width=218px;
border=0px}

If this part is even right, then what do I include in my HTML document to call the class="scrollbar_graphic" into play? I've taken numerous stabs at playing with the standard image tag and even tried adding a <DIV> just for the image:

<DIV class="scrollbar_graphic"></DIV>

.... but it just ain't happening.

Any assistance is greatly appreciated.

[meow]

Hihi! :)

You can't embed images with CSS. Your declaration 'url(images/scrollbar_blue.gif);' means nothing.

You can use background images though. I don't know if that's applicable to your situation but you could try this:

.scrollbar_graphic {
background: #abc123 url(images/scrollbar_blue.gif);
height: 238px;
width: 218px }

http://www.w3.org/TR/REC-CSS2/colors.html#q2

Some notes.
In CSS you don't use equal sign. You use colon. You always have a property followed by one or several values. 'property: value'. Borders can have style, width and color. 'border-style' is required. So to say 'no border' you use 'border-style: none' or the shorthand 'border: none'.
http://www.w3.org/TR/REC-CSS2/box.html#border-properties

[Deanna475]

Hi M. :) Thanks for helping me out. I thought about trying to use the background image property but that would affect my entire background page, would it not? Unless ...... Hmmmmm ....... If I can isolate the image and place it where I want on the page -- maybe put it in a layer -- and use the background image property on that layer with a fixed position, no repeat, etc., then maybe I'll have my desired effect? What do you think? Works in theory but can it hold water? LOL

And thanks for reminding me about the equal sign vs. colon. I knew that *S*, but I've been at this for 12 hours straight -- losing my focus ........ need sleep ......... zzzzzzzzzzzzz

D.

[brothercake]

That would work fine, as it were:

<div style="width:200px;height:100px;background-image:url(button.gif);"></div>

but in the CSS class rather than inline style; I would avoid using a textual image like this - if the text is important, - because non-CSS browsers won't see it

[Deanna475]

Hi B !! Thanks for your input. I applied your theory and it holds water!! Many many thanks. :thumbsup:

D.