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

Question

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

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

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

Answer 1

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

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

Answer 2

Можно stretch a background image using the background-size CSS property.

Примеры:

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
• Chrome начиная с 3,0
• Firefox начиная с 4.0
• Opera, так как 10,0
• Safari since 4.1

Answer 3

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

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

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

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