Menu
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?
812
You can use the CSS background-size: cover; to stretch and scale an image in the background with CSS only. This scales the image as large as possible in such a way that the background area is completely covered by the background image, while preserving its intrinsic aspect ratio.
In the table cell tag <td> where you would like to place the background image, paste the image attributes and values. Change the src= attribute name to the background= attribute.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
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:
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
