Размер фона - CSS-хитрости

background-sizeСвойство в CSS является одним из наиболее полезных - и самый сложный - из свойств фона. Есть много вариантов и различных синтаксисов, которые вы можете использовать для этого свойства, и все они имеют разные варианты использования. Вот простой пример:

html ( background: url(greatimage.jpg.webp); background-size: 300px 100px; )

Это пример двухзначного синтаксиса для размера фона. С этим свойством можно использовать четыре различных синтаксиса: синтаксис ключевого слова, синтаксис с одним значением, синтаксис с двумя значениями и синтаксис с несколькими значениями фона.

Ключевые слова

Помимо значения по умолчанию ( auto), вы можете использовать два ключевых слова background-size: coverиcontain

См. Pen background-size от CSS-Tricks (@ css-tricks) на CodePen.

Связанный

• фоновое приложение
• фоновый клип
• фоновый цвет
• фоновая картинка
• фон-происхождение
• фоновая позиция
• фон-повтор

Дополнительные ресурсы

• CSS3 Spec
• MDN

Поддержка браузера

Хром	Сафари	Fire Fox	Опера	IE	Android	iOS
3+	4.1+	3.6+	10+	9+	2.3+	4.0+