An HTML code for a background image to fit the size of the table

Question

Which code in HTML will allow me to use an image as a background image for a table, but not so that it would be repeated several times vertically and horizontally (in case the table is several times bigger than the image), but in such way that the image height is stretched out to be equal to the height of the table, and its width is stretched out to be equal to the width of the table?

Answer 1

The CSS background options can't handle this reliably across browsers, so you need to put an <img> tag in the table and position it appropriately. As Petr Marek alluded to in the comments, you can do this with the CSS attributes z-index and position, but it's not elegant.

If you set position: relative on the table, you can set position: absolute on the <img> with top: 0; height: 100%; left: 0; width: 100%; to position and size the image, and set z-index: -1 to make it appear behind the other content.

Here's a working example on jsFiddle.

Although it works perfectly for me in Chrome, since you're putting content on top of an image I wouldn't be surprised if it caused some browsers to mess up text selection or something else.

Answer 2

HTML stands for Hypertext Markup Language. It is not code. It is intended to provide semantic meaning and structure to a web-accessible document. Entities such as images are purely presentational cruft that was added because we got bored just reading text all day.

That being said, you can use CSS to possibly achieve what you want, but it may be bit tricky. An idea that comes to mind is adding an image element to the page with a height and a width set to be 100% of its container, and then positioning your table, with a transparent background color, over it. You'll have to look into z-indexes, obviously.

Answer 3

Presentation is the job of CSS, not HTML. You can use background-size in supporting browsers.