HTML - How Do You To Add A Repeated Background With An Image In A Table?

Hey all!

I would like to create a 3 row table with a background color in each row.

On the right side of the table I would like to display an image that sits on top of the background color and spans all 3 rows.

When I try to do this it seems that the row bg colors go OVER the image.

How can I get the image to sit on top of the 3 row bg colors?

I don't know any other way to do this but I'm definitely open to suggestions!
Thanks for any help!

This is the code I've been trying:
Code:

<TABLE cellpadding="0" width="200" cellspacing="0" border="0" style="
background-image:url(ask.gif); 
background-position: top right; 
background-repeat: no-repeat;">
   <tr  bgcolor="#FBE9D1">
      <td>&nbsp</td>
   </tr>
   <tr  bgcolor="#F7D5A7">
      <td height="20">ask a question</td>
   </tr>
   <tr  bgcolor="#FBE9D1">
      <td height="28">&nbsp;</td>
   </tr>
</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

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>

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?

In my website, the navigation bar and logo are repeated at the top of every page. However, if I were to make a change to the navbar, I would have to implement that change on every page (50+). Is there a way I can change the code in one place, and have it change on every page? Thanks!

Hi All,
I am newbie to website developing, would like to know if there is a way to avoid the repeated code on very page, so that coding could be easier.

The main(index) page looks like, i have a top page and two other pages left and right with content in the center.

---------------------------------------------------------------------------------------------
top page
---------------------------------------------------------------------------------------------
| |
Left Page| |Right Page
| |
__________________________________________________________

Is there a way to avoid writing code for top/left/right for every link I create in the website, is there a way to call from another file?

Any help is highly appreciated..thank you.

Alright, this is an admittedly novice question but I haven't been able to figure it out yet and would love some help.

I'm currently coding a website (my first, clearly) that will ultimately have a large number of pages. I understand the value of writing semantic code and pairing it with an external style sheet to make changes in design quick and easy across a website. My question is, how do you code common elements across the website (ie headers, navigation bars, footers, etc) so that making a change only once (such as adding a tab to the navigation bar) will change it across the site, without having to change the code on each individual page?

I understand that you can do this with php, but it doesn't seem to be the common solution. Is there another way to accomplish this without php?

Thanks in advance everybody!

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?

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>