Css background image height

I’m using this CSS:

To center an image and scale it based on window size, stopping the scaling at 768px. I can’t display the bottom part of the image when the window is at a larger size (it works fine when the window is minimized). When I change the height of the .image class to more than 600px, it breaks the image scaling.

Пример

Укажите размер фонового изображения с "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 определяет размер фоновых изображений.

С этим свойством можно использовать четыре различных синтаксиса: синтаксис ключевого слова («Auto», «Cover» и «содержит»), синтаксис с одним значением (устанавливает ширину изображения (высота становится «авто»), синтаксис с двумя значениями (первое значение: ширина изображения, второе значение: Height) и синтаксис нескольких фонов (разделенных запятой).

Значение по умолчанию: auto
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.backgroundSize="60px 120px"

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

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера следуют -webkit-, -moz-, or -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-

Синтаксис CSS

Значения свойств

Значение Описание
auto Значение по умолчанию. Фоновое изображение отображается в исходном размере
length Задает ширину и высоту фонового изображения. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второй параметр имеет значение "Auto". Читать о единицах длины
percentage Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второе устанавливается в "Auto"
cover Измените размер фонового изображения, чтобы охватить весь контейнер, даже если он должен растянуть изображение или вырезать немного от одного из краев
contain Измените размер фонового изображения, чтобы убедиться, что изображение полностью отображается
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Пример

Укажите размер фонового изображения с процентами:

Читайте также:  Iusb3xhc sys синий экран 0x0000007e windows 7

#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":

Пример

Укажите размер фонового изображения с "содержать":

Пример

Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с "содержать", а второй фон-изображение с "Cover":

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.5+ 3.0+ 3.6+ 2.1+ 1.0+

Краткая информация

Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/css3-background/#the-background-size

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ | | auto ] <1,2>| cover | contain

Значения

Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto . Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size .

Opera до версии 10.53 использует нестандартное свойство -o-background-size .

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector