image repeat vertical

Panos
Panos used Ask the Experts™
on
Hello experts.
I'm trying to repeat a 12px height img as background of a td and place it 30px from the left(padding).
I'm afraid that this is not the right way to do this.(i find out that the padding-left and margin-left is not working)As i don't have a fixed height to use the image as a background of a div how can i solve my problem?
here is the code and a screenshot.
<!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=iso-8859-7" />
<title>Untitled Document</title>
<style type="text/css">
.repeatimg{
	background-image: url(img/SearchButtonbg.gif);
	background-repeat: repeat-y;
	padding-left:30px;
	}
</style>
</head>

<body><table width="366" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="122">&nbsp;</td>
    <td width="122">&nbsp;</td>
    <td width="114">&nbsp;</td>
   
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
   
  </tr>
  <tr>
    <td height="241">&nbsp;</td>
    <td></td>
    <td class="repeatimg"></td>
  
  </tr>
</table>

</body>
</html>

Open in new window

test.gif
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
hi, you can use background-position property:
http://www.w3schools.com/css/pr_background-position.asp

so your class should look like this:

.repeatimg{
      background-image: url(img/SearchButtonbg.gif);
      background-repeat: repeat-y;
      background-position:30px 0px;
}

padding has no effect for background.
Is the test.gif you mentioned is you needed?
what you needed?
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hi
ludofulop you have answered my question.Can i get a "padding top"  20px?
@panosms:
yes, set background-position:30px 20px;

check the link that i wrote, it's all described there.

Author

Commented:
I did check this allready but i did not get the padding-top.
see the image .
test2.gif
i think you can't do this, if you have repeating defined...
you will have to do it other way for example insert an empty TD above the 'repeated' td
 

Author

Commented:
Thank you very much for your help.
regards
panos

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial