 |  |  |  |  |  |  |  |
Background image? Z-Index?
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
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
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
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
Z-index requires that the image is Absolutely positioned which can cause other layout problems in different browsers.
HTH
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?
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?
•
•
Join Date: Feb 2005
Posts: 427
Reputation: 
Solved Threads: 12
Posting Pro in Training
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 ?
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 ?
•
•
Join Date: Jan 2007
Posts: 3,193
Reputation:
Solved Threads: 163
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.
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.
Last edited by MidiMagic; Aug 7th, 2007 at 5:11 am.
Daylight-saving time uses more gasoline
•
•
Join Date: Jan 2007
Posts: 3,193
Reputation:
Solved Threads: 163
Is there some reason I always have trouble posting at 4 am?
Last edited by MidiMagic; Aug 7th, 2007 at 5:08 am. Reason: The server locked up, and when I tried to free it, it posted twice.
Daylight-saving time uses more gasoline
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Solved Threads: 12
Posting Pro in Training
... 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
)
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
) •
•
Join Date: Jan 2007
Posts: 3,193
Reputation:
Solved Threads: 163
•
•
•
•
Originally Posted by autocrat 
... 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).
•
•
•
•
* 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...
HTML and CSS Syntax (Toggle Plain Text)
----
•
•
•
•
HTML and CSS Syntax (Toggle Plain Text)
----
•
•
•
•
should work fine...
where as
HTML and CSS Syntax (Toggle Plain Text)
----
•
•
•
•
shouldn't work (or won't work on all browsers!)HTML and CSS Syntax (Toggle Plain Text)
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
Last edited by MidiMagic; Aug 9th, 2007 at 1:14 am.
Daylight-saving time uses more gasoline
|
Similar Threads
- CSS - strech a background image? (Site Layout and Usability)
- background image alignment (HTML and CSS)
- Dreamweaver background image refresh (Graphics and Multimedia)
- background image - help (HTML and CSS)
- problem with background image repeat-y (HTML and CSS)
- Background image flickers in IE.... (JavaScript / DHTML / AJAX)
Other Threads in the HTML and CSS Forum
- Previous Thread: Problems on IE6
- Next Thread: Graphic Text containers that stretch
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form google griefers hackers hitcounter hover html ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping swf swf. textcolor timecolor titletags url urlseparatedwords visualization web webdevelopment webform website windows7