Background size image: CSS background-size property

Разное 

background-size | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

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

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис 

background-size: <bg-size> [, <bg-size> ]*

<bg-size> = [ <размер> | <проценты> | auto ]{1,2} | cover | contain

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

<размер>
Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
<проценты>
Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

Песочница

auto auto 100% 100% auto 100% 100% cover contain

div {
  background-size: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background-size</title> <style> div { height: 200px; /* Высота блока */ border: 2px solid #000; /* Параметры рамки */ background: url(/example/image/mybg.png) 100% 100% no-repeat; /* Добавляем фон */ background-size: cover; /* Масштабируем фон */ } </style> </head> <body> <div>…</div> </body> </html>

Объектная модель

Объект.style.backgroundSize

Примечание

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

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

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

Opera 9.5 некорректно устанавливает положение фиксированного фона.

Спецификация

СпецификацияСтатус
CSS Backgrounds and Borders Module Level 3Возможная рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

91213910.5334.13.64
2.314115.1

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Цвет и фон

См. также

  • background
  • background-attachment
  • background-clip
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • Масштабирование фона
  • Несколько фоновых картинок
  • Установка фона и градиента

Рецепты

  • Как сделать фоновую картинку на всю ширину?

Практика

  • Масштабирование фона
  • Масштабирование фона 2
  • Масштабирование фона 3

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29. 02.2020

Редакторы: Влад Мержевич

Стиль HTML DOM backgroundSize Свойство

❮ Назад ❮ Справочник по объектам стиля Далее ❯

Пример

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

document.getElementById(«myDIV»).style.backgroundSize = «60px 120px»;

Попробуйте сами »

Определение и использование

Свойство backgroundSize устанавливает или возвращает размер фоновых изображений.

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

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

Собственность
размер фона 4,0 9,0 4,0 4.1 10,5

Синтаксис

Вернуть свойство backgroundSize:

объект . style.backgroundSize

Установить свойство backgroundSize:

| object .style0061 длина |обложка|содержать|начальный|наследовать»

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

.
.
Значение Описание
авто Значение по умолчанию. Фоновое изображение содержит ширину и высоту
длина Задает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, второе устанавливается на «авто»
проценты Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, для второго устанавливается значение «авто»
крышка Масштабируйте фоновое изображение как можно больше, чтобы область фона полностью закрывалась фоновым изображением. Некоторые части фонового изображения могут быть не видны в области позиционирования фона
содержат Масштабируйте изображение до максимального размера, чтобы его ширина и высота могли поместиться в области содержимого
начальный Устанавливает для этого свойства значение по умолчанию. Читать про
начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Технические характеристики

Значение по умолчанию: авто
Возвращаемое значение: Строка, представляющая свойство background-size элемента
Версия CSS CSS3

Связанные страницы

Ссылка CSS: свойство background-size

❮ Предыдущая ❮ Справочник по объектам стиля Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

| О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

tachyons-background-size / Theming / Docs / ТАХИОНЫ

tachyons-background-size / Theming / Docs / ТАХИОНЫ Тахионы

v4.12.0

Скины Парит Размер фона Границы Радиус границы Коробчатая тень Непрозрачность

Размер фона

Background-size влияет на то, как фоновые изображения заполняют содержащиеся в них элементы. Хотя измерения могут быть объявлены явно для определения размера изображения, значения наиболее пригодными для повторного использования являются содержат , а закрывают .

Примеры

. contain { background-size: contains }

contains гарантирует, что внутри элемента отображается все изображение, независимо от размеров элементов.

.cover { background-size: cover }

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

Ховерс

Следующий
Бордюры

Артикул
MDN — Размер фона
тахион-фоновый размер
v5.0.5 136 Б
Декларации
8
Селекторы
8
Макс. Оценка специфичности
10
Размер Ср. Правило
1

Исходный код
src/_background-size.css 
 /*
 РАЗМЕР ФОНА
 Документы: http://tachyons.
No related posts.
Автор записи

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

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