How to stretch background image of a table cell with CSS?

Question

How can I stretch background image of a table cell with CSS? I have Googled it with no results.

When you set background image of a cell and the background size is smaller than the cell, then it will be repeated.

How can I force this background to stretch the entire table cell instead?

Answer 1

It is possible to stretch a background image using the background-size CSS property .

Examples:

body { background-size: 100% auto } /* Stretches image to full horiz. width */
body { background-size: 50% 50% } /* Stretches image to half of available
width and height - WARNING: aspect ratio not maintained */

body { background-size: cover } /* Ensures that image covers full area */
body { background-size: contain } /* Ensures that image is completely visible */

All major current browsers support the feature:

• IE since 9.0
• Chrome since 3.0
• Firefox since 4.0
• Opera since 10.0
• Safari since 4.1

Answer 2

You can't stretch a background image.

If you want to stretch an image, you have to put it in an img tag. You can use absolute positioning to put content on top of the image.

Answer 3

It is possible.

NOTE: This is using CSS3 and will not be supported by inferior browsers.

If you set your cell with this styling it should solve your problem. It will also allow for collapsible tables too because you're using %.

background-image: url('XXX');
background-repeat: no-repeat;
background-size: 100% 100%;