HTML - Using A Table Background Image And Row Bgcolors

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

I'm using firework and dreamweaver, but i need to expand some side bar images in html in a table so client can input their own copy so it expands vertically without compromising the design.

I need to use HTML code not CSS

What code can i use to vertical align the background image in a table?

Presently i have this working...

<td rowspan="9" background="expansion_images/right_001_r2_c5 copy.png">&nbsp;</td>

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

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?

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!

Hi everyone,

my problem is that I have a table with a background, which shows in my html editor, but when I upload the page, in bluehost, the background image doesn't show. All other images are showing fine except the background images of any table.

here's what I'm writing


<table width="817" height="172" border="0" align="center" cellpadding="12" background="backsev.jpg" bgcolor="#CCCCCC">


<tr>
<td><td align="right"><table width="480" height="145" border="0" cellpadding="0">
<tr>
<td valign="left"><div align="justify">

</div></td>
</tr>
</table></td>
</tr>
</table>


so in this case, after uploaded it only shows bgcolor is is not reading/showing
background="backsev.jpg"

any ideas?

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>

Hi, I have searched the forums for an answer to this question, but I couldn't find anything that solves my problem. I have designed a site in Dreamweaver. http://www.dirt-e-riders.com
In IE 6 and IE 7 it shows correctly, but in firefox the backgound image for my table doesn't show.

In effect I have two main tables, each sized at 100% width.
Table 1 is at the top of the page and contains a bg. in jpg format
Table 2 is just below that and also contains a bg. in gif format
I didnt make the bg for table1 a gif cause the quality is too poor.

The bg for table1 does not show, but the bg for table 2 does.
I have already tried to read the bg from my CSS with no repeat but it does the same.

Could someone please help me. I'm new to web design. Your help will be greatly appresiated. Thanks

ok i know it's rough but here the site - basically it runs fine in firefox, chrome, and latest safari and fine on mobile opera etc, but in ie 7 it completely screws the background box on a few tables on a all the pages pages:

run this in ie 7:
http://www.gospeldesign.co.uk/sb/

view it in chrome to see how it's meant to look, do you think it's something i'm doing in the css?

i'm pretty new to this and only just started using css.

thanks for any help.

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