2 Background images in a <tr>

Hey all, i'm trying to get to background images (.png's) in a tr

<tr class="submitArea">
  <td></td>
  <td></td>
</tr>

How do i accomplish this? The first image is a pattern and i want the second image to be a gradient from say white to transparent bottom aligned to the <tr>

The code shows what i'm currently doing.
.blackAndBlue tr.submitArea{
	background-image:url(images/forms/backgrnd1.png);
}

Open in new window

LVL 3
engineroomAsked:
Who is Participating?
 
knonieConnect With a Mentor Commented:
You have not mentioned that earlier that repeating patterns on separate TDs can distory the pattern the point 2 TD joins in a row.

Below are the changes.

Run in browser to see...

:-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.blackAndBlue{
	background-image:url(backgrnd1.png);
	background-repeat: repeat;
	background-color: #0033CC;
}
 
.blackAndBlue tr.submitArea{
background: transparent url(backgrndGradient.png) repeat-x center bottom;	
}
</style>
</head>
 
<body bgcolor="#CC9966">
<table height="56" border="0" cellpadding="0" cellspacing="0" class="blackAndBlue">
<tr class="submitArea">
    <td width="152" height="56">&nbsp;</td>
    <td width="171">&nbsp;</td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
LZ1Commented:
You cannot specify 2 background images inside of one container whether it be a table or DIV.  You can "fake" it with CSS and DIVs.
Why not just combine the two images into one background image?  
0
 
knonieCommented:
What about putting one of BG on some other tag, like TABLE?

Like, make a CLASS with BG pattern, and apply it over

Then, apply your gradient class to TR, or TD, whatever way you are currently doing.

:-)
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
engineroomAuthor Commented:
@knonie
I only want the pattern in the submitArea

@lz1
The pattern is only 5x5 and repeats to fill the height of the tr. If i make them both 1 image, then it won't repeat the pattern.also,  I don't have control of the height of the <tr>.
0
 
knonieCommented:
If possible, please share both these image files here, so it would be helpful to find some solution...

:-)
0
 
LZ1Commented:
I see.  Like knonie said if you could post the images and code for us please.
0
 
engineroomAuthor Commented:
Sure! It's attached. Also, this way the background color of the tr can be anything and the effect with the 2 images will remain.
<style>
.blackAndBlue tr.submitArea{
	background-image:url(images/forms/backgrnd1.png);
}
</style>
 
<table border="0" cellpadding="0" cellspacing="0" class="blackAndBlue">
<tr class="submitArea">
	<td>&nbsp;</td>
	<td><input type="submit" name="Submit" id="button" value="Submit" /> <input type="reset" name="button2" id="button2" value=" Clear Form "></td>
</tr>
</table>

Open in new window

backgrnd1.png
backgrndGradient.png
0
 
knonieCommented:
Apply one BG on TABLE, and other on TD,
It's working perfectly in IE7, Chrome, and Firefox.

:-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.blackAndBlue{
	background: url(backgrndGradient.png) repeat-x center bottom;
}
.blackAndBlue td.submitArea{
	background-image:url(backgrnd1.png);
	background-repeat: repeat;
}
 
</style>
</head>
 
<body bgcolor="#CC9966">
<table border="0" cellpadding="0" cellspacing="0" class="blackAndBlue">
<tr>
    <td class="submitArea">&nbsp;</td>
    <td class="submitArea"><input type="submit" name="Submit" id="button" value="Submit" /> <input type="reset" name="button2" id="button2" value=" Clear Form "></td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
engineroomAuthor Commented:
Here's what i did. The only problem with that is that the background is on the whole table. So i tried to move the background-color to the tr.submitArea and that didn't work.

.blackAndBlue {
	width:500px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	border:2px solid #222222;
	background: url(images/forms/backgrndGradient.png) repeat-x center bottom;
	background-color:#000000;
 
}
 
.blackAndBlue tr.submitArea{
	background-image:url(images/forms/backgrnd1.png);
}

Open in new window

0
 
engineroomAuthor Commented:
Also, it looks funky in iE7
0
 
knonieCommented:
Are you looking for something like the attached image?
[I have extended table's width to give you a better look of the behavior of two images]

Also, please confirm if you are using IE6 or IE7.

:-)
btn-sample.jpg
0
 
engineroomAuthor Commented:
kinda, but i need the bgcolor to appear in the table row and it has to be part of the class
0
 
LZ1Commented:
Try this:
 

<style>
.blackAndBlue tr.submitArea{
	background-image:url(images/forms/backgrnd1.png);
}
#outer {
	background-image:url(images/forms/backgrndGradient.png);
	background-repeat: repeat-x;
}
	
#inner {
	background-image:url(images/forms/backgrnd1.png);
	background-repeat: repeat-x;
}
</style>
 
<table border="0" cellpadding="0" cellspacing="0" class="blackAndBlue">
<tr class="submitArea">
	<td>&nbsp;</td>
	<td>
<div id="outer"> <div id="inner"> <input type="submit" name="Submit" id="button" value="Submit" /> 
<input type="reset" name="button2" id="button2" value=" Clear Form "></div></div></td>
</tr>
</table>

Open in new window

0
 
knonieCommented:
Which BG color you need in rows? Some other than the entire page's BG color?
What's the difference between my screenshot and the thing you want to achieve?

:-)
0
 
knonieCommented:
Perhaps something like this screen-shot?

:-)
btn-sample-02.jpg
0
 
engineroomAuthor Commented:
yes knonie, something like that.
0
 
knonieCommented:
Below is the code for this.

All styling is done in CSS.
The difference is, now you need to apply Class on TD and not on TR.

Replace "#990000" with the color you want in the row cells.

:-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.blackAndBlue{
	background: #990000 url(backgrndGradient.png) repeat-x center bottom;
}
.blackAndBlue td.submitArea{
	background-image:url(backgrnd1.png);
	background-repeat: repeat;
	
}
 
 
</style>
</head>
 
<body bgcolor="#CC9966">
<table border="0" cellpadding="0" cellspacing="0" class="blackAndBlue">
<tr>
    <td width="10" class="submitArea">&nbsp;</td>
    <td width="313" class="submitArea"><input type="submit" name="Submit" id="button" value="Submit" /> <input type="reset" name="button2" id="button2" value=" Clear Form "></td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
engineroomAuthor Commented:
The problem is that the pattern in <td>1 does not line up with <td>2  . If i want to use a different pattern it might look funky.
0
 
engineroomAuthor Commented:
Sorry i haven't been around, but Awesome!. That seemed to work. As long as my rows have a background color to them it will mask the patter in the background behind it. Looks great! Thanx everyone.
0
 
engineroomAuthor Commented:
P.S.

Can you explain this line to me?
background: transparent url(backgrndGradient.png) repeat-x center bottom;      

what does transparent do?
0
 
knonieCommented:

Actually, that is a shortcut way to write background code in CSS,
i.e. instead of writing all background related stuff separately, we can do it like that as well.
 
background: transparent url(backgrndGradient.png) repeat-x center bottom;  
 
MEANS:
 
background-color: transparent; [or put any hex color here]
background-image: url(backgrndGradient.png);
background-repeat: repeat-x;
background-position: center bottom;
 
Actually, we don't want color to appear here, so we have used the term "transparent", which means "no color"
 
:-)

Open in new window

0
 
engineroomAuthor Commented:
cool. can you do that with any property that has multiples? how about border? say you want
border-left: 1px solid #333333 right:?

0
 
knonieCommented:

Some more shortcuts:
 
BORDER:
border: 1px solid #333;
 
Means apply border on all 4 sides, so you don't need to specify it as border-top, left, etc separately.
Works only if all 4 borders have same properties.
 
 
 
PADDING AND MARGINS: [Examples are for padding, but works for margin as well]
 
padding: 2px;
Means: 2px padding on all 4 sides.
 
padding: 3px 7px;
Means: 3px on top and bottom; and 7px on right and left.
 
padding: 2px 9px 1px 4px;
Means, padding on Top[2x], Right[9px], Bottom[1px], Left[4px].
[Tip to remember it: Starting from Top, move clockwise and write 4 values]
 
 
 
FONT:
 
font: bold 12px Arial, Helvetica, sans-serif;
Means: font-weight, font-size, font-family;
 
 
I hope that was helpful.
 
:-)

Open in new window

0
 
engineroomAuthor Commented:
really cool!  didn't know about that you could do that with the font. Does it have to be in that order? Another words, can you say

font: 12px bold tahoma;
0
 
knonieCommented:
Yes, Order must be followed, or it won't work...

:-)
0
 
engineroomAuthor Commented:
Cool. Thanx again!
0
 
engineroomAuthor Commented:
wait, what if i don't want to specify font-size.. .can i omit one?

font: bold tahoma
0
 
knonieCommented:
You cannot omit any in "font" shorthand style, or it won't work...

:-)
0
 
engineroomAuthor Commented:
Once again... thanx!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.