background-size в CSS


Background-size в CSS

New! My 44-page ebook «CSS in 44 minutes» is out! ��

# background-size

Defines the size of the background image.

default background-size: auto auto;

The background image will retain its original size.

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It’s bigger than its container (which is 150px high) and will thus be clipped.

background-size: 120px 80px;

You can specify a size in pixels:

  • the first value is the horizontal size
  • the second is the vertical size

background-size: 100% 50%;

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

The keyword contain will resize the background image to make sure it remains fully visible.

The keyword cover will resize the background image to make sure the element is fully covered.

Свойство background-size

Свойство background-size определяет ширину и высоту фонового изображения.

Если задана только одна величина, другая по умолчанию будет иметь значение auto.

Допустимые значения

  • — ширина и высота фонового изображения в прямом виде
  • — ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента.
  • contain — изображение масштабируется, сохраняя при этом пропорции, по большей стороне так, чтобы и ширина и высота поместились внутри области фонового изображения.
  • cover — изображение масштабируется, сохраняя при этом пропорции, по меньшей стороне так, чтобы и ширина и высота полностью покрыли область фонового изображения.
  • auto — изображение имеет свой собственный размер (масштаб 100%), а если нет то масштабируется, как будто задано значение contain.
фоновое изображение в натуральную величину
background-size:auto (фоновое изображение не масштабируется) background-size:contain background-size:cover
Значение по умолчанию auto
Применимо ко всем элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами
  • Internet Explorer 9 и выше
  • Firefox 4 и выше
  • Opera 10.5 и выше
  • Safari 5 и выше
  • Chrome 4 и выше

Пример

Твой код:
Результат:

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Safari 3+ и Chrome 1+ поддерживают аналогичное свойство -webkit-background-size, Firefox 3.6 -moz-background-size, а Opera 9.6+(до 10.53) -o-background-size. Эти свойства имеют некоторые отличия от background-size, самое большое из них то, что -webkit-background-size и -o-background-size не поддерживают значений contain и cover.

CSS background-size Property

The background-size property defines the size of the background image.

The background-size property is one of the CSS3 properties.

This property has five values: auto, length, percentages, cover, contain.

Auto sets the background image in its original size. It’s the default value. Length specifies the height and the w >background-image specified by percentages. Here also the negative values are invalid.

Cover scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no space remains.

Contain resizes the background image so that the image is fully visible.

Initial Value auto
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited No.
Animatable Yes. The size of the background image is animatable.
Version CSS3
DOM Syntax object.style.backgroundSize = «50% 100%»;

Syntax

Example

In the above example, the length value is applied. It sets the width and height of the background image. The first value sets the width, and the second value sets the height. If one value is given, the second is set to «auto».

See another example where the width and the height of the background-image are defined by percentages.

Example


Let’s see an example with cover value. It makes the image as large as possible without stretching the image.

CSS background-size Property

Example

Specify the size of a background image with «auto» and in pixels:

#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;
>

More «Try it Yourself» examples below.

Definition and Usage

The background-size property specifies the size of the background images.

There are four different syntaxes you can use with this property: the keyword syntax («auto», «cover» and «contain»), the one-value syntax (sets the width of the image (height becomes «auto»), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma).

Default value: auto
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.backgroundSize=»60px 120px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
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 Syntax

Property Values

Value Description Play it
auto Default value. The background image is displayed in its original size Play it »
length Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to «auto». Read about length units Play it »
percentage Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to «auto» Play it »
cover Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges Play it »
contain Resize the background image to make sure the image is fully visible Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Specify the size of a background image with percent:

Илон Маск рекомендует:  Что такое код imagefontheight

#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%;
>

Example

Specify the size of a background image with «cover»:

Example

Specify the size of a background image with «contain»:

Example

Here we have two background images. We specify the size of the first background image with «contain», and the second background-image with «cover»:

Example

Use different background properties to create a «hero» image:

lsreg’s IT blog

После установки фонового изображения может потребоваться его увеличить. Чтобы это сделать, используется свойство css background-size, которое является сравнительно недавним. Поэтому старые версии браузеров его не поддерживают. С его помощью можно, например, растянуть фоновую картинку по ширине или высоте или вписать ее в рамку необходимого элемента.

Синтаксис и значения свойства

Синтаксис элемента прост. Сначала пишется свойство background-size, а затем – его значение, которое может быть следующим:

  1. CSS-единицы. Могут использоваться любые возможные в этом языке единицы: пиксели, сантиметры и так далее.
  2. Проценты. Необходимы для адаптивной верстки сайта. Можно настроить размер фонового изображения в процентах от ширины или высоты веб-страницы.
  3. Auto. Если выставляется единственное значение, картинка масштабируется таким образом, чтобы сохранить пропорции фонового изображения. Если же пишется два auto (для ширины и высоты), то размер картинки становится стандартным.
  4. Contain. Делает так, чтобы изображение полностью вписывалось в блок, сохраняя одну из сторон пропорционально изображению.
  5. Cover. Также пропорционально увеличивает фоновую картинку, но при этом масштабирует ее таким образом, что часть изображения может быть не видна.

Лучше понять разницу между cover и contain можно на таком примере.

В первом случае используется значение contain, а во втором – cover

Применение свойства на практике

Учитывая разницу в разрешениях экрана между разными устройствами, рекомендуется активно использовать свойство background-size. Иначе картинка будет обрезаться при низком разрешении или быть слишком маленькой при большом. Недостаток свойства – искажение изображения при масштабировании, с которым ничего по сути не получится сделать, кроме как подбирать фоновые картинки с высоким разрешением.
Может потребоваться указать ширину и высоту фоновой картинки (первое и второе значение соответственно). Также можно выставить auto, и второй параметр будет подобран автоматически, исходя из пропорций картинки.
С помощью свойства background-size можно играться с градиентами, добиваясь интересных эффектов. Например, можно сделать его повторяющимся.

Код у такого фона следующий:

С помощью этого свойства можно сделать ровные (не градиентные) полосы. Для этого используется такой код.

И результат его исполнения браузером.

Особо продвинутый код позволяет реализовать, например, клеточный фон. Для этого необходимо сделать несколько фонов, в одном из которых обязательно должен быть альфа-канал (чтобы изображения не перекрывали друг друга). Пример кода:

Вендорные префиксы

Поскольку свойство background-size является довольно новым, старые версии браузеров его могут не поддерживать. Чтобы добиться полной совместимости, необходимо к тому коду еще добавить вендорные префиксы. Пример с сеткой, полностью поддерживаемый старыми браузерами, будет выглядеть так.


По-хорошему, градиент в примере тоже надо сделать совместимым со старыми версиями браузеров, поскольку он принадлежит к CSS3. Но в таком случае пример будет избыточным. Просто надо знать, что в градиентах также добавляются вендорные префиксы, чтобы добиться полной совместимости.

background-size

Свойство background-size — используется для настройки размера фоновых изображений.

Общие сведения

Фоновое изображение может быть настроено таким образом чтобы полностью покрывать всю область элемента или иметь заданные автором размеры.

У некоторых изображений ( ), таких как, например, JPEG, есть встроенные размеры и пропорции, а у других изображений, таких как градиенты ( ) нет встроенных размеров и пропорций и они занимают всю фоновую область, если не указано иное. Окончательный размер фонового изображения формируется на основе того есть ли у фонового изображения внутренние размеры и пропорции.

Свойство background-size принимает либо ключевое слово ( cover или contain ), либо пару не ключевых слов ( |

), либо не ключевое слово и значение auto . Например:

Для пары значений первое значение задаёт ширину изображения, а второе значение задаёт высоту изображения.

Если указано только одно не ключевое значение, то второе считается как auto .

Свойство background-size может принимать несколько значений разделённых запятыми, поэтому когда у элемента указано несколько изображений в свойстве background-image, каждое значение будет применяться к соответствующему фоновому изображению (первое значение для первого фонового изображения, второе значение для второго и т.д.).

Синтаксис свойства

  • Синтакис:
  • Значение по умолчанию: auto
  • Применяется: ко всем элементам
  • Наследуется: да
  • Анимируется: да, за исключением ключевых слов

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

    — значение масштабирует фоновое изображения до указанного значения в соответствующем направлении. Нельзя указывать отрицательную длину.

— значение указанное в процентах масштабирует фоновое изображения до указанных процентов относительно области позиционирования фона, который определяется свойством background-origin. Если значение свойства background-origin не указано автором, будет использовано значение padding-box , то есть фоновое изображение позиционируется относительно системы координат фона, центр которой находится в верхнем левом углу.

  • contain — масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наибольшего, чтобы его ширина и высота вписывались в область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно растягивается на всю область позиционирования.
  • cover — масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наименьшего размера, чтобы его ширина и высота могли полностью покрывать область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно отображается в размере области позиционирования.
  • auto — ключевое слово, которое масштабирует фоновое изображение в соответствующем направлении, сохраняя его встроенные пропорции.
    • Если у изображения есть встроенные размере (высота и ширина), то оно будет отображаться со своими размерами.
    • Если у изображения нет встроенных пропорций и размеров, то оно будет отображаться с размерами области позиционирования.
    • Если у него нет размеров, но есть пропорции, то оно отобразиться так как-будто было установлено ключевое слово contain .
    • Если у изображения есть один из встроенных размеров и пропорция, то оно отобразиться с размерами определёнными этим одним размером и пропорцией.
    • Если у изображения есть один из встроенных размеров, но нет пропорции, оно отобразиться с использованием этого одно встроенного размера и соответствуюещего размера области позиционирования.
  • Фон в CSS – памятка для начинающих

    При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

    Работа с фоном в CSS

    С помощью свойства background можно задать положение, цвет, изображение, повторяемость и привязку фона, как для отдельных элементов, так и полностью для всего сайта, что по своей сути, кстати, является заданием определённых настроек для тега . Рассмотрим все свойства, которые связаны с заданием фона.

    background-color

    Задаёт цвет фона. Его можно применять как к отдельным элементам

    , так и ко всему веб-сайту с помощью тега .

    background-image

    Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

    Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

    Илон Маск рекомендует:  Что такое код asp asprequestqueuemax

    background-repeat

    Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.

    Оно может иметь несколько значений:

    • background-repeat: repeat-x — повторение по горизонтали;
    • background-repeat: repeat-y — повторение по вертикали;
    • background-repeat: repeat — повторение и по горизонтали и по вертикали;
    • background-repeat: no-repeat — изображение не повторяется.

    Например, повторение по горизонтали выглядит так:

    background-attachment


    Это свойство определяет фиксирование фонового изображения при скроллинге:

    • background-attachment: scroll — фон прокручивается вместе со страницей;
    • background-attachment: fixed — фон остаётся неподвижным.

    background-position

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

    Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .

    • background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
    • background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

    gradient

    Плавный переход от одного цвета к другому, причем переходов допускается несколько.

    Использование градиента можно наглядно продемонстрировать в примере кода:

    Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

    Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.

    Работа с размером фона в CSS

    В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

    Существует несколько способов, позволяющих определить размер:

    Абсолютное изменение размера

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

    Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

    Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

    Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

    Относительное изменение размера

    Если применять проценты, размер будет основываться не на изображении, а на элементе.

    То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.

    Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

    Масштабирование до максимального размера

    В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

    Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.

    Такой фон страницы будет автоматически подгоняться под любое разрешение:

    Заполнение фоном

    Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

    В том случае, если соотношения сторон различаются, картинка обрежется:

    Масштабирование сразу нескольких фонов

    Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:

    Создание полупрозрачного фона в CSS

    Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

    Особенность данного свойства заключается в том, что прозрачность действует не только на фон, но и на все дочерние элементы. После увеличения прозрачности, и текст и фон станут полупрозрачными.

    Пример создания полупрозрачного блока:

    Однако достаточно часто полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным для читабельности.

    В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

    Пример задания прозрачного фона:

    Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

    background-size

    The background-size property is used to specify the size of background images.

    The background image can be set to cover the element’s entire background area or have definite dimensions defined by the CSS author.

    A background image can be set to cover the entire element’s background area using the cover keyword. It can also be set to be as big as possible while being contained within the background area using the contain keyword. If any of these two keywords is used, the intrinsic ratio of the image’s height and width are preserved if the image has intrinsic dimensions and proportions.

    Some s have intrinsic dimensions and proportions, such as JPEG images, for example, and other images such as s don’t have intrinsic dimensions and proportions and take up the size of the element’s background area unless specified otherwise (see values below). The final size of the background image is rendered depending on whether an image has intrinsic dimensions and proportions.


    The background-size property takes either a keyword value ( cover or contain ), or a pair of non-keyword values ( |

    ), or a non-keyword value and the value auto . For example:

    For pair values, the first value specifies the width of the image, and the second value specifies the height of the image.

    If only one non-keyword value is specified, the other one is assumed to be auto .

    The background-size property can also take comma-separated values so that when the element has more than one background image, each value is applied to a corresponding background image (first value for the first image, second value for the second image, and so on).

    Click on one of the different background-size values to see how the background rendering adjusts in the following interactive demo:

    Trivia & Notes

    The background-size property can be used to create interesting and creative background patterns when combined with CSS gradients. You can read all about creating those patterns in CSS3 Patterns, Explained by Lea Verou on 24 ways.

    Official Syntax

    • Syntax:
  • Initial: auto
  • Applies To: all elements
  • Animatable: yes, except keyword values
  • Values

    A percentage value scales the background image to the specified percentage value relative to the background positioning area, which is determined by the value of the background-origin property. Unless the value of the background-origin property is set by the author, it has the value of padding-box , which means that the background image is positioned with respect to a background coordinate system whose center is at the top left corner of the padding box. Negative percentage values are not allowed. contain Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area. If the background image has no intrinsic proportion and no intrinsic dimension, then it is rendered at the size of the background positioning area. cover Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area. If the background image has no intrinsic proportion and no intrinsic dimension, then it is rendered at the size of the background positioning area. auto The auto keyword that scales the background image in the corresponding direction such that its intrinsic proportion is maintained.

    • If the image has both intrinsic dimensions (height and width), it’s going to be rendered at its size.
    • If the background image has no intrinsic proportion and no intrinsic dimension, then it is rendered at the size of the background positioning area.
    • If it has no dimensions but has a proportion, it’s rendered as if contain had been specified instead.
    • If the image has one intrinsic dimension and a proportion, it’s rendered at the size determined by that one dimension and the proportion.
    • If the image has one intrinsic dimension but no proportion, it’s rendered using the intrinsic dimension and the corresponding dimension of the background positioning area.
    Илон Маск рекомендует:  address в HTML

    Notes

    If the value of the background-size property is a pair where one value is auto and the other value is or

    • If the image has intrinsic proportions: Use the length/percentage value specified to render the image in the corresponding dimension, and then use the image’s proportions to calculate the value of the other dimension. So, if, for example, the first value is a length and second value is auto , then the width of the image will be rendered to the specified length, and the height of the image will be calculated based on the image’s proportions.
    • If the image does not have an intrinsic proportion: Use the length/percentage value to render the image in the corresponding dimension. For the other direction (which gets the auto value), the browser will use the image’s dimension if it has one. For example, a JPEG image has two intrinsic dimensions (height and width), so if a height is set to a length value, and the width is set to auto , the browser will extract that width from the image and use it, because it has one. But if the image does not have an intrinsic width (e.g. a gradient), the browser will render it to have the same dimension as the background positioning area.

    The background-size property can also inherit the value of the background size specified on its parent element by using the value inherit . For example: background-size: inherit .

    Examples

    The following are all valid syntaxes for the background-size property.

    The following are all examples of background image sizes specified with the background-size property. The image in this example is assumed to be one with intrinsic dimensions and proportions (a JPEG image, for example);

    The following example stretches the image so that exactly two copies fit horizontally (notice the values of the background-repeat property and the background-origin property). The aspect ratio is preserved.

    The following example specifies the background size of two background images. The first value specifies the size of the first image, and the second value specifies the size of the second image.

    The following example will force the size of the gradient image to 100px by 100px.

    Live Demo

    Change the values of the background-size property in the following demo to see how it changes the rendering of the background image.

    As you change the values, try resizing the screen and see how the background image responds to the element’s size.

    Browser Support

    CSS3 Background-image options

    New properties to affect background images, including background-clip, background-origin and background-size

    Set size on background image with CSS?

    Is it possible to set the size of the background image with CSS?

    I want to do something like:

    But it seems it’s totally wrong to do it like that.

    18 Answers 18

    If you need to make the image bigger, you must edit the image itself in an image editor.

    If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want).

    CSS3 unleash the powers

    This is possible to do in CSS3 with background-size .

    All modern browsers support this, so unless you need to support old browsers, this is the way to do it.
    Supported browsers:
    Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) and Chrome 3.0+.

    In particular, I like the cover and contain values that gives us new power of control that we didn’t have before.

    Round

    You can also use background-size: round that have a meaning in combination with repeat:

    This will adjust the image width so it fits a whole number of times in the background positioning area.

    Additional note
    If the size you need is static pixel size, it is still smart to physically resize the actual image. This is both to improve quality of the resize (given that your image software does a better job than the browsers), and to save bandwidth if the original image is larger than what to display.

    background-size

    Изначально фоновые изображения показываются браузерами в свою натуральную величину, используя свойство CSS background-size можно изменять размеры изображений с сохранением пропорций (масштабировать) или без них.

    Тип свойства

    Применяется: ко всем элементам.

    Значения

    Значением свойства background-size является одна или две (разделенных пробелом) величины. Если указано две величины, то первая отвечает за ширину, вторая — за высоту изображения. Если указана только одна, то она отвечает за ширину, а значение высоты считается равной auto .

    • Проценты — значения в процентах (%), где за 100% берется ширина или высота элемента. Отрицательные значения (-20%) указывать нельзя.
    • Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них тоже недопустимы отрицательные значения.
    • auto — Автоматическое вычисление размеров. Если указано две величины (auto auto) или одна (auto), то изображение отображается в свою натуральную величину. Если одна из величин это Проценты или Размеры, а другая auto, то размер высчитывается исходя из пропорций изображения (масштабируется).
    • contain — масштабирование изображения таким образом, чтобы оно полностью помещалось внутри элемента и при этом прилегало как минимум к двум его противоположным сторонам.
    • cover — масштабирование изображения таким образом, чтобы оно полностью заполнило элемент, но при этом как минимум к двум его противоположным сторонам оно должно только прилегать. К двум оставшимся сторонам оно тоже может прилегать (если пропорции изображения и элемента совпадают), либо быть обрезанным (если не совпадают).

    Процентная запись: относительно размеров самого элемента.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL