Adding an HTML Table Background Image Using CSS

Adding an HTML Table Background Image Using CSS
Page content

Preparing to Work With an HTML Table Background Image: First Things First

Achieving an HTML table background image isn’t difficult, but it does require a little forethought to obtain the exact visual appearance you desire. First, determine whether the image will be the background for the entire table or just for one or more cells because depending on the image in question, you might have to adjust it. For example, if you have a large image that you want for the background of a single cell, you will have to make some adjustments so that all of it shows.

The background of the table displayed in the screen shot below was easily accomplished by setting the height and width of the table to that of the image. (Click any image for a larger view.)

You can see this in the code where the height is set to “510” and the width to “428.” Height and width are attributes that can be set on the element. We’re just looking at image size at this point instead of the Cascading Style Sheets (CSS) code that was used to produce the effect.

Adding a Background Image to a Single Table Cell

Again, an HTML table background image can also be applied to a single cell if you’d like. The adjustments you’ll have to make might become more tedious, but you do have this option. Below you can see that for demonstration purposes, I’ve applied the image to the first cell of the first row only. Instead of adjusting the image, I specified the height and width of the particular cell to have the image as a background. Notice how this changed the size of the remaining cells. Depending on your project, you might or might not want such an effect. Again, you’re still in control if you’re willing to make necessary adjustments.

CSS Code to Call the Image

You may have heard of CSS inline styles which can appear almost anywhere in an (X)HTML document (the “X” stands for “extensible”). While the use of inline styles is not a good idea if you’re doing heavy styling, it’s very convenient when you just need to style a few things or simply want to demonstrate a style. In the screen shot of the code above you saw style=“background: url(mouse.gif)” added to the element. The name of the image used is “mouse.gif” which appears in parenthesis. If you were coding for an HTML table background image for a single cell, you would still use this style, but it would be on the specific element corresponding to the cell that is to have the image as a background.

Gaining a solid knowledge of at least the basics of CSS and (X)HTML code is essential to good front-end web development as the two languages form a powerful pair. Other examples of how CSS and (X)HTML combine are seen when coding for vertical alignment and the CSS overflow property.