html table background,html - Table background image - Stack Overflow

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.

some text

img, div {

position: absolute;

}

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:

Table contents here

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;

}

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.