Замостить фоновую картинку

@Gelid · Регистрация: 09.11.2010

Студворк — интернет-сервис помощи студентам

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

HTML5
1
2
3
<td width="12%">
<img src="images/index_321.gif" width="100%" alt="">
</td>

но тут явно не хватает заполнения
и

HTML5
1
2
<td background="images/index_321.gif" style="width: 100%">
</td>

заполняет но не растягивает...

Humanoid · 09.11.2010, 15:06

Gelid,

HTML5
1
<td style="background: url('images/index_321.gif') repeat;"></td>

@Gelid · 09.11.2010, 15:12 **[ТС]**

А как с растягиванием по ширине? простите - может глупый вопрос - первый раз вижу такую конструкцию..

Humanoid · 09.11.2010, 15:18

Сообщение от Gelid

А как с растягиванием по ширине?

Не понял. Надо же повторять? repeat как раз и значит, что картинка будет повторяться и по X и по Y.

@Gelid · 09.11.2010, 15:20 **[ТС]**

нет, надо имменно повтрять по высоте а по ширине растянуть.
Если бы просто замостить то и работает просто

HTML5
1
2
<td background = "/images/index_321.gif">
</td>

@Hagrael · 09.11.2010, 16:35

Gelid, есть CSS-свойство background-size, но оно появилось только в CSS3, и многие браузеры его не поддерживают. Так что считайте что ваша задача невыполнима. Но можно использоваться адаптивную разметку и подставлять нужную картинку в зависимости от разрешения экрана.

@Gelid · 09.11.2010, 17:52 **[ТС]**

Ясно, значит буду резать картинку и создавать еще один столбец таблицы. А про адаптивную разметку - очень интересно. спасибо.

Humanoid · 09.11.2010, 19:52

Gelid, у тебя ширина столбца известна? Просто в графическом редакторе растяни картинку по горизонтали, что бы она была на всю ячейку и через стили замости её по вертикали.

@Hagrael · 10.11.2010, 10:34

Humanoid, я так понял, у него резиновый дизайн.

@Gelid · 10.11.2010, 11:43 **[ТС]**

В том то и дело что если растянуть картинку по ширине столбца в редакторе - то при смене разрешения экрана - получается черти что..поэтому все таки лучше добавить столбцы для нефоновых рисунков.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@Gelid 0 / 0 / 0 Регистрация: 09.11.2010 Сообщений: 30
	09.11.2010, 15:12 [ТС]
	А как с растягиванием по ширине? простите - может глупый вопрос - первый раз вижу такую конструкцию.. 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	09.11.2010, 16:35
	Gelid, есть CSS-свойство background-size, но оно появилось только в CSS3, и многие браузеры его не поддерживают. Так что считайте что ваша задача невыполнима. Но можно использоваться адаптивную разметку и подставлять нужную картинку в зависимости от разрешения экрана. 1

@Gelid 0 / 0 / 0 Регистрация: 09.11.2010 Сообщений: 30
	09.11.2010, 17:52 [ТС]
	Ясно, значит буду резать картинку и создавать еще один столбец таблицы. А про адаптивную разметку - очень интересно. спасибо. 0

Humanoid Почетный модератор 11559 / 4353 / 453 Регистрация: 12.06.2008 Сообщений: 12,455
	09.11.2010, 19:52
	Gelid, у тебя ширина столбца известна? Просто в графическом редакторе растяни картинку по горизонтали, что бы она была на всю ячейку и через стили замости её по вертикали. 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	10.11.2010, 10:34
	Humanoid, я так понял, у него резиновый дизайн. 0

@Gelid 0 / 0 / 0 Регистрация: 09.11.2010 Сообщений: 30
	10.11.2010, 11:43 [ТС]
	В том то и дело что если растянуть картинку по ширине столбца в редакторе - то при смене разрешения экрана - получается черти что..поэтому все таки лучше добавить столбцы для нефоновых рисунков. 0