Как растянуть фоновое изображение ячейки таблицы с помощью CSS?

Question

Как растянуть фоновое изображение ячейки таблицы с помощью CSS?Я гуглил его безрезультатно.

Когда вы устанавливаете фоновое изображение ячейки, а размер фона меньше, чем ячейка, то это будет повторяться.

Как я могу форсировать этот фонвместо этого растянуть всю ячейку таблицы?

Answer 1

Можно растянуть фоновое изображение, используя background-size свойство CSS .

Примеры:

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 */

Все основные современные браузеры поддерживают эту функцию:

• IE с 9.0
• Хром с 3,0
• Firefox с 4.0
• Опера с 10.0
• Safari с 4.1

Answer 2

Вы не можете растянуть фоновое изображение.

Если вы хотите растянуть изображение, вы должны поместить его в тег img.Вы можете использовать абсолютное позиционирование, чтобы поместить контент поверх изображения.

Answer 3

Это возможно.

ПРИМЕЧАНИЕ: это использует CSS3 и не будет поддерживаться низшими браузерами.

Если вы установите ячейку с этим стилем, он долженрешить вашу проблему.Это также позволит складывать таблицы, потому что вы используете%.

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