Stop repeating table and cell background image in HTML

In webpage designing the tables are used frequently. Tables are used to create templates when you want to keep the contents fixed in your pages. Of course there are many ways to do this, but tables are the easiest ones.

Often we add background images to the tables as well as the cells. Most of us (beginners in HTML) don't know how to stop them repeating.

Here is the way to do it in HTML:

Code for table background:

 <table border="1" width="100%" style="background-image: url('your image url here'); background-repeat: repeat; background-attachment: fixed; background-position: left top">


Code for cell background:

 <td border="1" width="100%" style="background-image: url('your image url here'); background-repeat: repeat; background-attachment: fixed; background-position: left top">

Here,

The bacground-repeat can be set as

no-repeat / repeat / repeat-x / repeat-y

The background-attachment can be set as

fixed / scroll

The background-position can be set as

Vertical position : top / center / bottom

Horizontal position : left / center / right