CSS: растягивание фонового изображения по ширине <td>

Быстрый ответ

Для растягивания фонового изображения в CSS предлагаются два доступных способа:

1. background-size: cover; позволяет сохранить пропорции изображения.
2. background-size: 100% 100%; гарантирует точное соответствие размерам элемента.

Разберём это на практике:

.element {
  background-image: url('image.jpg'); /* Укажите путь к вашему изображению */
  background-size: cover; /* Изображение растягивается, соблюдая пропорции */
  /* ЛИБО */
  background-size: 100% 100%; /* Изображение растягивается с точным соответствием размерам элемента */
  background-repeat: no-repeat; /* Отменяем повторение, чтобы изображение не дублировалось */
  background-position: center; /* Центрируем изображение */
}

Чтобы cover работал правильно, ширина и высота элемента должны быть указаны как 100%. Также важно аккуратно организовать хранение изображений, чтобы избежать проблем в будущем.

Визуализация

Вот наглядный пример того, как это может выглядеть:

.container {
  background-image: url('balloon.jpg'); /* Используем изображение воздушного шарика */
  background-size: cover;  /* И оно идеально заполняет контейнер */
}

🧱 Обои с Воздушным Шаром (🎈)                  🧱 Растянутые Обои со Вставками (🎈🔧)

Чему мы здесь учимся: используя background-size: cover;, изображение шарика (🎈) полностью покрывает элемент (🧱), не оставляя незаполненных участков.

Управление процессом растягивания

Обеспечиваем совместимость с браузерами

Мы стремимся к тому, чтобы представление осталось единым в различных браузерах:

.element {
  background: url('image.jpg') no-repeat center; /* Все любят центрированный фон */
  -webkit-background-size: cover; /* Для пользователей Chrome и Safari */
  -moz-background-size: cover;    /* Для пользователей Firefox */
  -o-background-size: cover;      /* Для пользователей Opera */
  background-size: cover;         /* Стандарт для остальных браузеров */
}

Проверять совместимость всегда стоит на незаменимом ресурсе Can I use.

Отдельное уважение к особенностям Internet Explorer

Для тех пользователей, которые до сих пор используют Internet Explorer:

.element {
  background-image: url('image.jpg');
  background-size: cover; /* Основной вариант для современных браузеров */
  
  /* Альтернативный вариант для Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale'); /* Применяем специальный фильтр для IE */
  zoom: 1; /* IE требует дополнительного подхода */
}

Работаем с адаптивным дизайном и накладываем контент на изображение

Наше внимание особенного значения заслуживают адаптивный дизайн и наложение контента. Вот как мы это делаем:

• Применяем минимальную высоту: позволяющую изображению определять размеры, а не контенту.
• Используем псевдоэлементы CSS: для поддержания чистоты HTML-кода.
• Контролируем переполнение контентом: свойство overflow: hidden помогает не допустить выхода контента за рамки элемента.

Существует и проверенная временем техника с использованием тэга img

Есть ситуации, когда старый добрый тэг img не заменишь:

<div class="bg-container">
  <img src="image.jpg" class="bg-image" alt="Фоновое изображение"> <!-- Наш любимый тэг img на службе -->
  <div class="content"> /* Здесь вы можете разместить что-то важное... */ </div>
</div>

.bg-container {
  position: relative;
}
.bg-image {
  position: absolute; /* Изображение абсолютно позиционируется */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;  
}

Не стоит забывать о важности атрибута alt для обеспечения доступности и поисковой оптимизации.

Полезные материалы

1. Идеальное полноэкранное фоновое изображение | CSS-Tricks — Отличное руководство по созданию полноэкранных фоновых изображений.
2. background – CSS | MDN — Подробное руководство по свойству background.
3. Свойство background-size в CSS — Обзор свойства background-size.
4. Простые адаптивные изображения с фоновыми изображениями в CSS — Smashing Magazine — Техники для создания адаптивных фоновых изображений.
5. Пожалуйста, увеличьте это фоновое изображение! – A List Apart — Обсуждение различных способов увеличения фоновых изображений на веб-страницах.