CODEWITHSUNDEEP
htmlcssimagebackgroundcss-tables
SilverLight
SilverLight

Reputation: 20478

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

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?

Upvotes: 8

Views: 33086

Answers (3)

Michael
Michael

Reputation: 315

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%;

Upvotes: 3

Pekka
Pekka

Reputation: 449813

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

Upvotes: 11

Guffa
Guffa

Reputation: 700870

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.

Upvotes: 4

Related Questions