В CSS3 появились настройки для масштабирования фонового изображения. Настройки масштабирования задаются с помощью параметра background-size.

Есть два значения параметра background-size для масштабирования, это:

  • contain - фоновое изображение масштабируется с сохранением пропорций по размеру окна, чтобы уместится полностью
  • cover - фоновое изображение масштабируется с сохранением пропорций так, чтобы занять всю площадь контейнера
  • auto - фоновое изображение имеет исходный размер
  • значение - задается значение, например, px для ширины и высоты
  • проценты - аналогично варианту значение, только в процентах

Пример CSS3 кода:

background-size: contain;
background-repeat: no-repeat;

Пример для значения auto:

background-size: 100px auto;

Ширина фоновой картинки будет 100px, а высота подберется пропорционально для сохранения пропорции изображения.

Чтобы сделать комментарий, нужно авторизоваться на сайте!