?
Solved

2 Background images in a <tr>

Posted on 2009-02-19
29
Medium Priority
?
255 Views
Last Modified: 2012-06-22
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

0
Comment
Question by:engineroom
  • 14
  • 12
  • 3
29 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 23683460
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
 
LVL 9

Expert Comment

by:knonie
ID: 23683471
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
 
LVL 3

Author Comment

by:engineroom
ID: 23683756
@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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 9

Expert Comment

by:knonie
ID: 23683794
If possible, please share both these image files here, so it would be helpful to find some solution...

:-)
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23684138
I see.  Like knonie said if you could post the images and code for us please.
0
 
LVL 3

Author Comment

by:engineroom
ID: 23684373
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
 
LVL 9

Expert Comment

by:knonie
ID: 23684540
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
 
LVL 3

Author Comment

by:engineroom
ID: 23684944
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
 
LVL 3

Author Comment

by:engineroom
ID: 23685316
Also, it looks funky in iE7
0
 
LVL 9

Expert Comment

by:knonie
ID: 23685699
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
 
LVL 3

Author Comment

by:engineroom
ID: 23685757
kinda, but i need the bgcolor to appear in the table row and it has to be part of the class
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23685781
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
 
LVL 9

Expert Comment

by:knonie
ID: 23685850
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
 
LVL 9

Expert Comment

by:knonie
ID: 23685876
Perhaps something like this screen-shot?

:-)
btn-sample-02.jpg
0
 
LVL 3

Author Comment

by:engineroom
ID: 23686009
yes knonie, something like that.
0
 
LVL 9

Expert Comment

by:knonie
ID: 23686076
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
 
LVL 3

Author Comment

by:engineroom
ID: 23686118
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
 
LVL 9

Accepted Solution

by:
knonie earned 2000 total points
ID: 23686248
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
 
LVL 3

Author Comment

by:engineroom
ID: 23722518
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
 
LVL 3

Author Comment

by:engineroom
ID: 23722527
P.S.

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

what does transparent do?
0
 
LVL 9

Expert Comment

by:knonie
ID: 23722623

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
 
LVL 3

Author Comment

by:engineroom
ID: 23722667
cool. can you do that with any property that has multiples? how about border? say you want
border-left: 1px solid #333333 right:?

0
 
LVL 9

Expert Comment

by:knonie
ID: 23722806

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
 
LVL 3

Author Comment

by:engineroom
ID: 23722900
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
 
LVL 9

Expert Comment

by:knonie
ID: 23722929
Yes, Order must be followed, or it won't work...

:-)
0
 
LVL 3

Author Comment

by:engineroom
ID: 23724731
Cool. Thanx again!
0
 
LVL 3

Author Comment

by:engineroom
ID: 23724738
wait, what if i don't want to specify font-size.. .can i omit one?

font: bold tahoma
0
 
LVL 9

Expert Comment

by:knonie
ID: 23725122
You cannot omit any in "font" shorthand style, or it won't work...

:-)
0
 
LVL 3

Author Comment

by:engineroom
ID: 23725417
Once again... thanx!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month15 days, 13 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question