HTML-код для фонового изображения, чтобы соответствовать размеру таблицы

Question

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

Answer 1

Параметры фона CSS не могут надежно обрабатывать это в разных браузерах, поэтому вам нужно поместить тег <img> в таблицу и расположить его соответствующим образом.Как упоминал Петр Марек в комментариях, вы можете сделать это с помощью атрибутов CSS z-index и position, но это не элегантно.

Если вы установите position: relative в таблице, вы можете установить position: absolute на <img> с top: 0; height: 100%; left: 0; width: 100%; для позиционирования и размера изображения и установите z-index: -1, чтобы оно отображалось позади другого содержимого.

Вот рабочий пример jsFiddle .

Хотя в Chrome он отлично работает для меня, поскольку вы размещаете контент поверх изображения, я не удивлюсь, если это приведет к тому, что некоторые браузеры испортят выбор текста или что-то еще.

Answer 2

HTML обозначает язык разметки гипертекста. Это не код. Он предназначен для обеспечения семантического значения и структуры документа, доступного через Интернет.Такие объекты, как изображения, представляют собой чисто презентационную затею, которая была добавлена, потому что нам надоело просто читать текст весь день.

При этом можно использовать CSS, чтобы достичь желаемого, но это может быть немного сложно.Идея, которая приходит на ум, - это добавить элемент изображения на страницу с высотой и шириной, равными 100% его контейнера, а затем расположить над ним таблицу с прозрачным фоновым цветом.Очевидно, вам придется заглянуть в z-индексы.

Answer 3

Презентация - это работа CSS, а не HTML. Вы можете использовать background-size в браузерах с поддержкой .