В CSS3 появились настройки для масштабирования фонового изображения. Настройки масштабирования задаются с помощью параметра background-size.
Есть два значения параметра background-size для масштабирования, это:
- contain - фоновое изображение масштабируется с сохранением пропорций по размеру окна, чтобы уместится полностью
- cover - фоновое изображение масштабируется с сохранением пропорций так, чтобы занять всю площадь контейнера
- auto - фоновое изображение имеет исходный размер
- значение - задается значение, например, px для ширины и высоты
- проценты - аналогично варианту значение, только в процентах
Пример CSS3 кода:
background-size: contain; background-repeat: no-repeat;
Пример для значения auto:
background-size: 100px auto;
Ширина фоновой картинки будет 100px, а высота подберется пропорционально для сохранения пропорции изображения.