Background Images on Tables
Examples
By Jennifer Kyrnin, About.com Guide
- Add an Image to a Table Background
- Add an Image to a Table Background Without Tiling
- Add an Image to a Table Background Tiled Horizontally
- Add an Image to a Table Background Tiled Vertically
- Background Colors Block Background Images on Tables
- Fix a Background Image to the Bottom of a Table
Add an Image to a Table Background
| column 1 | column 2 | column 3 |
|---|---|---|
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
Return to Table Background Image FAQ.
Add an Image to a Table Background Without Tiling
| column 1 | column 2 | column 3 |
|---|---|---|
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
Return to Table Background Image FAQ.
Add an Image to a Table Background Tiled Horizontally
| column 1 | column 2 | column 3 |
|---|---|---|
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
Return to Table Background Image FAQ.
Add an Image to a Table Background Tiled Vertically
| column 1 | column 2 | column 3 |
|---|---|---|
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
Return to Table Background Image FAQ.
Background Colors Block Background Images on Tables
| column 1 | column 2 | column 3 |
|---|---|---|
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
Return to Table Background Image FAQ.
Fix a Background Image to the Bottom of a Table
I was asked: Is it possible in a table to have the background of it be fixed at the bottom? Let’s test and find out:
| column 1 | column 2 | column 3 |
|---|---|---|
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
| abc | def | ghijk |
Place the following CSS on the table and it will position an image (called image.gif) at the bottom center of the table without repeating it.
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: bottom;
Return to Table Background Image FAQ.
