Изменение размера 1 фонового изображения для нескольких контейнеров Div на странице

Question

У меня есть это одно необычное фоновое изображение, которое нужно масштабировать, чтобы оно стало фоном для 3 блоков на одной странице, 100% высота / ширина.Возможно ли это?

НЕ 1 масштабирование фона для фона всей страницы.

Но

|Box 1 (50x50) получает фон ||Box 2 (20x20) получает фон |и т. д.

Я хотел бы назначить класс «background» всем этим элементам div и использовать 1 фоновое изображение, масштабируемое в зависимости от размеров элемента div.Это квадрат, и это нормально, если он выглядит слегка искаженным

К вашему сведению - это макет друпальной страницы.

Answer 1

Я не знаю ограничений вашего браузера, но есть свойство CSS3 под названием background-size. Вы просто установили бы это на background-size: 100% 100%.

Answer 2

.background img {
    height: 100%;
    width: auto;
}

Это заставит изображение растягиваться, чтобы соответствовать высоте div при высоте 100% и масштабироваться естественным образом по ширине: auto.