Background image? Z-Index?

[Bonus]

I have a template that I'm trying to customize. It has a left sidebanner div and image.
How do I get text to appear on top of the image? By making the image a background-image in CSS? By specifying z-index?
Your help is GREATLY appreciated

[webecho]

The best way is to put the image in as a background image using CSS.
Z-index requires that the image is Absolutely positioned which can cause other layout problems in different browsers.

HTH

[Scrawn_Dog]

Hi all, I'm having a similar problem...

I have an image that I would like to be the background of a table cell so I can have text over it. I have given the cell a class referred to it in my style sheet, which reads:

td.banner {
background-image:url(../images/banner.jpg);
background-position:center;
background-repeat:no-repeat;
background:fixed;
}

The images are there in working mode, but when I preview in a browser, the images aren't there!

Can anyone tell me what's wrong?

[autocrat]

Not 100% certain you can put "background" in a TD... I know that it is also dodgey trying to colour a TD...

So you have two options.
1) Put a Div inside the TD and apply the BGIMG to that
2) Use full on selectors.... #TABLEID TR TD {} and see if that works.

To be honest... probably best going with (1)... and is the Table for content... or layout ?

[MidiMagic]

Is there some reason I always have trouble posting at 4 am?

[MidiMagic]

I have had no trouble coloring a td. A background should work in any box object.

But it must be a td and not a TD. CSS doesn't know what a TD is.

All relevant tage, styles, ids, classes, and selectors must be in lowercase for CSS to understand them.

Be aware that the cell will NOT expand to show the entire image. It shows only the portion which fits behind the contents.

[autocrat]

... MidiMagic ...
The reason I mentioned it...
" being dodgey "
...is that some browsers aren't 100% on it, (i.e. some simply won't show it if it is the TD that is styled, rather than the TABLE TR / TABLE TD / TABLE TR TD or use of classes etc.).

Simply fore-warning them and trying to make sure they get the best result across browsers (ok, most modern ones are fine, but I know NN and some Opera's are iffy on it).

Also, can you please confirm about the UPPER/lowercase for CSS...

* I thought that you shouldn't use _ (underscore) due to some browsers not liking it (added for CSS2 after release) (NN was an issue).

* You shouldn't use a Numeric value at the begin (not due to CSS, but due to DocTypes).

* You can use UPPER/lower/MiXeD case in ID and CLASS, so long as the same is used in both the DOC and the CSS code, (but you are correct about things such as TABLE should be table (I think)), thus...

<div id="rabbitone"> #rabbitone
<div id="rabbitOne"> #rabbitOne
<div id="rabbit1"> #rabbit1
<div id="raBBitone"> #raBBitone
<div id="raBBit1"> #raBBit1

should work fine...
where as

<div id="Rabbitone"> #Rabbitone
<div id="rabbit_one"> #rabbit_one
<div id="rabbitone"> #RABBITONE
<div id="RABBITONE"> #rabbitone

shouldn't work (or won't work on all browsers!)

???

If you know of an official doc on this, please point it out, as for some reason I cannot actually find one... (which bugs me no end ;) )

[MidiMagic]

... MidiMagic ...
Also, can you please confirm about the UPPER/lowercase for CSS...
* I thought that you shouldn't use _ (underscore) due to some browsers not liking it (added for CSS2 after release) (NN was an issue).

True. Use letters and numbers for classes and ids for max compatibility. The first character must be a letter.

* You shouldn't use a Numeric value at the begin (not due to CSS, but due to DocTypes).

Correct.

* You can use UPPER/lower/MiXeD case in ID and CLASS, so long as the same is used in both the DOC and the CSS code, (but you are correct about things such as TABLE should be table (I think)), thus...

<div id="rabbitone"> #rabbitone
   <div id="rabbitOne"> #rabbitOne
   <div id="raBBitone"> #raBBitone

The problem is that you shouldn't use more than one of these as identifiers. Mozilla (Netscape and Firefox) correctly addresses them as three different ids, but Internet Explorer does smash-case on them (interpreting all alphabetic characters as being lowercase), making all of them become the same id.

----

<div id="rabbit1"> #rabbit1
   <div id="raBBit1"> #raBBit1

These become the same id in IE.

----

should work fine...
where as

<div id="Rabbitone"> #Rabbitone

That one works as long as the smash-case duplicate ID is not present.

----

<div id="rabbit_one"> #rabbit_one
   <div id="rabbitone"> #RABBITONE
   <div id="RABBITONE"> #rabbitone

shouldn't work (or won't work on all browsers!)

The first one has an illegal character on some Doctypes.

The last two become the same id in IE, and dont address in Mozilla (or address as each other).
???

If you know of an official doc on this, please point it out, as for some reason I cannot actually find one... (which bugs me no end ;) )

XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)

[autocrat]

lol... no wonder I couldn't see a reference, I was looking at CSS 1/2 specs... not xhtml!

Thank you for the extra clarification :)