Sunday, January 13, 2008

How to remove "tile" effect for images used as a background in websites

When using background images for websites you may sometime want to only have a picture as the background. But by default, the background image will "tile" to fill up all the free space.

In order to stop the "tile" effect, you can utilize CSS.

Add the following code to any tag that can use an image as a background:

style="background-repeat:no-repeat"

When using tables, there are times you may want to have the tiling effect and times you don't. In order to specify specific cells to have the desired effect you will have to create a CSS class.

styles.css
TD.NoTile { background-repeat: no-repeat; }

You would then add the required code to any of the table cells you want:




No comments: