HTML - Setting Image As Background In A Table ..

Hi I want to addd a image for background so i can postion it and not have it repeat : for for a table cell if u see my link below its the purple table cell that has the Bomboniere Adelaide as the heading i only want the background image in that cell - thanks in advance

http://weddingsmadeeasy.com.au/adelaide/Bomboniere.html

Hi...I'm not new to html but i've come across something i cant get to work. I have created a page with a background image to repeat-x and it look great.

Next I want to place a three column table at the top and over this repeated background image.

The problem is that the table get placed below the 'background_img.jpg'. So there is a large gap between the top of the page and the table.

How do I get the table to be placed over or on top of the repeated background img?

Thanks

Hello all,

First time posting to the forums here.

I'm creating a table and each row represents a "tab" of the UI. Each cell has a background image that looksl ike this.



however, when I render my table and have text in the cell, the right edge of the tab is chopped off like this..


Any recommendations on some CSS or table attributes that I can aplly to make both rounded ends of the background image appear?

I've tried turning off table borders, cell spacing and cell padding.

Any help would be greatly appreciated. Thanks.

So I decided to see if I could make my site XHTML 1.0 Strict-compliant.

Here's the main page on my test server

I'd be thrilled with it if I could do 3 things:

- Set the background color of the left column to match the color behind the fonts. Is there a CSS class I can create and set the cells to that class?

- Remove the border around clickable images.

- Get the spacing between the menu options on the left to look the way it does on the other pages in the site.

If you click any of the pages on my actual site you can see the look I'm going for.

Thanks as always for the help!

Joshua

I'm a beginner at html, this class is online and my teacher doesn't really keep in touch....So any help what so ever would be greatly appreciated, just a direction to go in...I'm lost.

This is supposed to be a sudoku puzzle, doesn't work, but just displays a puzzle. The book kinda confused me when it asked for sub tables. Mainly, I'm just not sure how I need to layout the nested tables. I included the code for the table and a pic of what it's supposed to look like. (I inserted the "5's" just to help me try to see what I was doing)




Here's the instructions:
http://books.google.com/books?id=4-BlHT9Xb1oC&pg=PA334&lpg=PA334&dq=the+japanese+puzzle+factory+html&source=bl&ots=yCVllJjfgL&sig=pPsbW dc01C5rjY6vAgTIBLzg3P0&hl=en&ei=Fo34S7bONoH48Aah-9X9Cg&sa=X&oi=book_result&ct=result&resnum=5&ved=0CCAQ6AEwBA#v=onepage&q&f=false

HTML Code:

<table class="spuzzle"> 
   
   <caption>Sudoku</caption>
   
   <thead>
		<tr>
			<th></th>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
			<th>5</th>
			<th>6</th>
			<th>7</th>
			<th>8</th>
			<th>9</th>
		</tr>
   </thead>
   
   <tbody>
		<tr>
			<th>A</th>
			<td class="greenbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					
				</table>
			</td>
			<td class="goldbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
			<td class="greenbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<th>B</th>
		</tr>
		<tr>
			<th>C</th>
		</tr>
		<tr>
			<th>D</th>
			<td class="goldbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
			<td class="greenbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
			<td class="goldbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<th>E</th>
		</tr>
		<tr>
			<th>F</th>
		</tr>
		<tr>
			<th>G</th>
			<td class="greenbox" rowspan="3" colspan="3">
				<table class="sub">
				    <tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
			<td class="goldbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
			<td class="greenbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<th>H</th>
		</tr>
		<tr>
			<th>I</th>
		</tr>
   </tbody>
   
   </table>

Hi:

I have a 600-row table which to now is presented to the user with always the first row displaying.

Problem:

How do I specify that I want a different and specific row of the table to be displayed at the top of the viewport ?

Thank you,

-Mel Smith

Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result?

Hey, I'm trying to set something so simple as the TD width for 1 specific column, but it will NOT listen to me!

http://www.unreal-deals.com/ebook/ad...i-showdata.php

I've set the td width on the second column Item_Name to be 5000px, just to see if it would work. It does nothing.

No matter if I set the table width to 100% or 300%, setting the TD width does not affect that TD...

What am I missing here?

Thanks

I have created a button which is linked to some JavaScript to dim the screen when it is pressed. using CSS I have changed the image of the button using a graphic. The graphic is a .PNG as it uses transparency but when set the image as the button it has lost all transparency is there anyway to enable the transparency of the .PNG this is the code I am using to do it.

Code:

<input type="button" onClick="d()" class="button">

Here is an image depicting the trouble I'm having:



I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes.

It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly.

Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image.
Then I'd do this for every one of my images, and a collage would be formed.

The problem is, the table makes large white spaces wherever the image sizes don't match!

How do I get rid of these spaces, or is there an entirely different code/approach I should be using?

Thanks!

Here is my current code:

HTML Code:

<html>
<head>
<style type="text/css">
table.nospace {
        padding: 0; margin: 0;
        border-collapse: collapse;
}
table.nospace tr {
        padding: 0; margin: 0;
}
table.nospace td {
        padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>

<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>

<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>

<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>

</TR>
</TABLE>

</body>
</html>

hi,

i would like to know if its possible to place a table background image on top of the td color within that table...

example he www.tomesrabold.com/levy/thingstodo.html

I would like the image at the bottom to be on top of the yellow bar at left. The image at the bottom is the background to the entire table, while the left bar is the background color to the td.

Hi,

I'm a complete newb and html-challenged, so please forgive my stupid questions.

This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right?
So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks!

~Serena

P.S. is it possible to do mouseovers for certain coordinates on an image map?

Hi,

I can't seem to figure out how to have a centered background image in a table in addition to its background color. Here's the site in question:

http://deliciousintlbakery.com/test.htm

I want to keep the red background in the table, but I also want an image centered behind the text (the address of the cafe). Here's the code:

<table width=70% cellpadding="0" cellspacing="0" border=1 align="center" style="font-family: Arial ; font-size: 9pt;" bordercolor="#FFCC00">
<tr><td>
<table width=100% cellpadding="0" cellspacing="0" bgcolor="8D2B25" height="250" border="0" style="font-family: Copperplate Gothic Bold ; font-size: 9pt;">
</td></tr>

Thanks!

I am trying to have a non repeating background in my table. My table is inside a DIV tag. It works perfect in Mozilla Firefox but not in internet explorer. I know someone on this forum had a similar problem awhile ago but I couldn't seem to fix my problem. I am not the best at coding. This is what I have

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" style="background:url(assets/blob2.png)no-repeat">

Any help would be greatly appreciated

How/where can I add a background color to this table?

thanks.


Code:

<TABLE cellSpacing=0 cellPadding=0 width=100% border=0>
				<TR>
					<TD><font class=tbody>
			<form action="/smusermanager/members/default.asp?action=login" method=post name=login language="JAVASCRIPT" onsubmit="return Validate();"><input type=hidden name=todo value="login"><input type=hidden name=url value="/smusermanager/members/default.asp">

<table border=0 cellspacing=0 cellpadding=0 width=95% align=center class=colorformborder><tr class=colorformborder><td><table border=0 cellspacing=0 width=100% cellpadding=0><tr class=colorformborder><td colspan=2><table border=0 cellspacing=1 cellpadding=5 width=100% colspan=2><tr class=colorformheader><td colspan=2><font class=textsize9><font color=white><b>Login Here</b></font></td></tr>

<tr class=colorformfields><td align=center colspan=2><font class=textsize9></font></td></tr><tr class=colorformfieldsalt><td align=right width=50% ><font class=textsize9>Email Address</font></td><td><font class=textsize9><input class=fieldbox type=text size=20 maxlength=50 name="members_username"></font></td></tr>

<tr class=colorformfields><td align=right width=20% ><font class=textsize9>Password</font></td><td><font class=textsize9><input class=fieldbox type=password size=20 maxlength=50 name="members_password"></font></td></tr><tr class=colorformfields><td colspan=2 align=right><font class=textsize9><input class=fieldbox type=submit value="Login" id=submit2 name=submit2></font></td></tr>

</td></tr></table></td></tr></table></td></tr></table></form>

<div style="padding-left: 24px;"> <font face="Arial" color="#000000" size="3"><img src="/images/Hphone.gif" style="vertical-align: middle;"> <a href="?action=login">&nbsp;&nbsp;Home</a><br><br>
						<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone1.gif" style="vertical-align: middle;"><a href="?action=register">&nbsp;&nbsp;Register</a><br><br>
						<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone2.gif" style="vertical-align: middle;"><a href="?action=forgotusername">&nbsp;&nbsp;FAQ</a><br><br>
						<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone3.gif" style="vertical-align: middle;"><a href="?action=forgotusername">&nbsp;&nbsp;Terms Of Use</a><br><br>
						<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone4.gif" hspace="4px" style="vertical-align: middle;">
<a href="?action=forgotusername">&nbsp;&nbsp;Contact Us</a><br><br>
                        <IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone5.gif" style="vertical-align: middle;"><a href="?action=forgotpass">&nbsp;&nbsp;Forgot Password</a><br><br>
						<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone7.gif" style="vertical-align: middle;"><a href="?action=forgotusername">&nbsp;&nbsp;Forgot Username</a></font></div>

					</font>

</TD>
				</TR>
			</TABLE>