engineroom
asked on
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.
<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);
}
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.
:-)
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.
:-)
ASKER
@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>.
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>.
If possible, please share both these image files here, so it would be helpful to find some solution...
:-)
:-)
I see. Like knonie said if you could post the images and code for us please.
ASKER
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.
backgrndGradient.png
<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> </td>
<td><input type="submit" name="Submit" id="button" value="Submit" /> <input type="reset" name="button2" id="button2" value=" Clear Form "></td>
</tr>
</table>
backgrndGradient.png
Apply one BG on TABLE, and other on TD,
It's working perfectly in IE7, Chrome, and Firefox.
:-)
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"> </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>
ASKER
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);
}ASKER
Also, it looks funky in iE7
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
[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
ASKER
kinda, but i need the bgcolor to appear in the table row and it has to be part of the class
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> </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>
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?
:-)
What's the difference between my screenshot and the thing you want to achieve?
:-)
ASKER
yes knonie, something like that.
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.
:-)
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"> </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>
ASKER
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
ASKER
P.S.
Can you explain this line to me?
background: transparent url(backgrndGradient.png) repeat-x center bottom;
what does transparent do?
Can you explain this line to me?
background: transparent url(backgrndGradient.png) repeat-x center bottom;
what does transparent do?
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"
:-)
ASKER
cool. can you do that with any property that has multiples? how about border? say you want
border-left: 1px solid #333333 right:?
border-left: 1px solid #333333 right:?
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.
:-)ASKER
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;
font: 12px bold tahoma;
Yes, Order must be followed, or it won't work...
:-)
:-)
ASKER
Cool. Thanx again!
ASKER
wait, what if i don't want to specify font-size.. .can i omit one?
font: bold tahoma
font: bold tahoma
You cannot omit any in "font" shorthand style, or it won't work...
:-)
:-)
ASKER
Once again... thanx!
Why not just combine the two images into one background image?