Table background image

Question

We need to set background image of a table. One way is to set the background attribute of table tag but this needs to enable printbackground option in the browser when printing. Any other way out like we can set z-index of image and table?

Answer 1

You can put a DIV behind and place the image there, then position the table exactly over it. Voilà.

Answer 2

This is really a CSS quetion. z-index only takes affect when objects are positioned absolutely. It is used to manually set the order in which elements appear on top of one another. If a HTML element appears after another, by default it will appear on top of the other, and you can use z-index to override this default.

<img src="some image"/>
<div>some text</div>

<style type="text/css">
img, div {
    position: absolute;
}
</style>

In the above html, the div will appear on top, and z-index could be used to change this.

What you're trying to achieve display a background image for a table, including when it's being printed - am I correct? Your problem is that by default most browsers don't print background-images (to save on ink and to make things easier to read). You can usually choose to print with background images on in your browser settings if you wish, so perhaps you don't need to force this on your site, instead just note to the users to turn on background-images in their print settings?

But if you do indeed want to force users to print the background image, your code may look something like this:

<img class="table-bg-image" src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png"/&gt;
<table class="with-bg-image">
    <tr><td>Table contents here</td></tr>
</table>

<style type="text/css">
    img.table-bg-image {
        position: absolute;
        z-index: -1;
    }
    table.with-bg-image, table.with-bg-image tr, table.with-bg-image td {
        background: transparent;
    }
</style>

Remember to compare the image size to the size of the table.

Positioning the image absolutely will cause it to 'float' under the table, because when you don't set 'top' and 'bottom' attributes absolute positioning doesn't change an elements position (it only means that it doesn't take up any room). The fact that the element is absolutely positioned is causing it to display above the table by default, so we use a negative z-index to make it appear behind.