background-size
Укажите размер фонового изображения с помощью "auto" и в пикселях:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Попробуйте сами »
Определение background-size
CSS свойство background-size
определяет размер фоновых изображений.
Существует четыре различных синтаксиса, которые вы можете использовать с этим приложением: синтаксис ключевых слов ("auto", "cover" и "contain"), синтаксис с одним значением (устанавливает ширину изображения (высота становится "auto"), синтаксис с двумя значениями (первое значение: ширина изображения, второе значение: высота) и синтаксис с несколькими фонами (разделяются запятой).
Значение по умолчанию: | auto |
---|---|
Унаследовано: | no |
Анимируемый: | yes. Читайте о animatable Попробуй |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.backgroundSize="60px 120px" Попробуй |
Поддержка background-size
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Синтаксис background-size
background-size: auto|length|cover|contain|initial|inherit;
Значения background-size
Значение | Описание | Демонстрация |
---|---|---|
auto | Значение по умолчанию. Фоновое изображение отображается в исходном размере | Демо ❯ |
length | Задает ширину и высоту фонового изображения. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, второму устанавливается значение "auto". Читайте о единицах длины | Демо ❯ |
percentage | Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, второму устанавливается значение "auto". | Демо ❯ |
cover | Измените размер фонового изображения, чтобы оно покрывало весь контейнер, даже если для этого придется растянуть изображение или немного отрезать один из краев | Демо ❯ |
contain | Измените размер фонового изображения, чтобы убедиться, что оно полностью видно | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры background-size
Укажите размер фонового изображения в процентах:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Попробуйте сами »
Укажите размер фонового изображения с помощью "cover":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Попробуйте сами »
Укажите размер фонового изображения с помощью "contain":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Попробуйте сами »
Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с помощью "contain", а второго фонового изображения с помощью "cover".
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Попробуйте сами »
Используйте различные свойства фона для создания изображения "hero":
.hero-image {
background-image: url("photographer.jpg"); /* Используемое
изображение */
background-color: #cccccc; /* Используется, если изображение
недоступно */
height: 500px; /* Вы должны установить указанную высоту */
background-position: center; /* Центрируйте изображение */
background-repeat: no-repeat; /* Не повторяйте изображение */
background-size: cover; /* Измените размер фонового изображения, чтобы оно покрывало весь контейнер */
}
Попробуйте сами »
Страницы по темеbackground-size
CSS Учебник: CSS Фоны
HTML DOM справочник: backgroundSize свойство