Table CSS (Image/Background) Help....

JediMaster · 25-10-2009, 17:57

I have been trying to get a Table CSS to work, I thought it would be EASY lol.

I have 1 Table (1 Cell) 900 wide. I want to have a background image (thats 900 wide) repeated down the table.

But also I want to position a Image at the TOP of the table thats 900 wide also. These 2x images will be the background of the table.

I will then add Text on top of the image (inside the Cell). So the images have to be Backgrounds not adding IMG tag & cant add text over it.

Cheers

**Damien** · 25-10-2009, 20:38

Do you have some existing CSS that's not working or do you need an idea on how to do it?

webcrawler2050 · 25-10-2009, 22:35

Quote:

Originally Posted by JediMaster

I have been trying to get a Table CSS to work, I thought it would be EASY lol.

I have 1 Table (1 Cell) 900 wide. I want to have a background image (thats 900 wide) repeated down the table.

But also I want to position a Image at the TOP of the table thats 900 wide also. These 2x images will be the background of the table.

I will then add Text on top of the image (inside the Cell). So the images have to be Backgrounds not adding IMG tag & cant add text over it.

Cheers

Is it absolutly necessary to use tables?

punky · 25-10-2009, 23:33

Right I think I have it now. You want a background at the back, and image on top of that and then a table on top of that?

If you use <div> with absolute positioning and z-index you can. z-index says when things are on top of each other which is at the back and which is at the front. Default is 0, positive is coming out of the screen towards the user, minus is going back into the screen.

Probably are easier ways but something like this:

Code:

<html>
	<body>
		
		
		<!-- Your normal code here -->
	
	
	<!-- This div just wraps everything into one group -->
	<div style="position:absolute;">
		
			<!-- This is the background and is at the back. Z-index: 0 -->
			<div style="position:absolute;left:0px;top:0px;z-index:0;width:900px;height:300px;background-image:url('test.gif');">
			</div>
			
			<!-- This contains the image. Z-index: 1 -->
			<div style="position:absolute;left:0px;top:0px;z-index:1;width:900px;height:300px;">
				<img style="position:absolute;z-index:0" src="test2.gif" />
			</div>
			
			<!-- This contains the table. Z-index:2 -->
			<div style="position:absolute;left:0px;top:0px;z-index:2;width:900px;height:300px;">
			<table style="width:300px;height:300px;">
				<tr>
					<td>1111111</td><td>222222</td><td>3333333</td>
				</tr>
							<tr>
					<td>444444</td><td>5555555</td><td>6666666</td>
				</tr>
							<tr>
					<td>7777777</td><td>8888888</td><td>99999999</td>
				</tr>
			</table>
			</div>
	</div>
	</body>
</html>

JediMaster · 26-10-2009, 11:26

Quote:

Originally Posted by webcrawler2050

Is it absolutly necessary to use tables?

No not really. I just used Tables to test stuff.

Quote:

Originally Posted by punky

Right I think I have it now. You want a background at the back, and image on top of that and then a table on top of that?

Yes thats about it

I have uploaded a DEMO at http://www.suziperry.tv/test/css.htm of what your code is. Also @ http://www.suziperry.tv/test/ is what I want it to look like

Your CSS had Height tag, I dont know how high each page would be, so would prefer it to not have height. Also needs to be Centre.

Only other way I can think of, is to make my Top Image 900x390_Top.jpg 1000 pixel High (or larger) then just use 1 image (no need to overlay 2x

---------- Post added at 10:26 ---------- Previous post was at 09:15 ----------

Just worked out a way with DIV Tags & CSS. Not the Best way maybe, but it does what I want. http://www.suziperry.tv/test/box.htm

Code:

a.box {
    padding-left: 3px;
    font-weight: bold;
}
div.moduletable h3, div.box h3, div.box-dark h3 {
  margin: 0;
  font-weight: bold;
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 1.0em;
  margin-bottom: 5px;
  padding-left: 0px;
}

div.box {
  width: 900px;
  background: url(BG_100.jpg) repeat-y;
  margin-bottom: 2px;
}

div.box div {
  background: url(BG_Bottom.jpg) bottom left no-repeat;
}

div.box div div {
  background: url(900x390_Top.jpg) top left no-repeat;
  padding: 7px 3px 7px 2px;
}

div.box div div div {
  background: none;
  padding: 0;
  width: auto !important;
  width: 100%;
}

a.box {
    padding-left: 1px;
    font-weight: bold;
}
div.module2 table h3, div.box2 h3, div.box2-dark h3 {
  margin: 0;
  font-weight: bold;
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 1.0em;
  margin-bottom: 5px;
  padding-left: 0px;
}