background-size | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain

Значения

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

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

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

Браузеры

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

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

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

Цвет и фон

CSS по теме

  • background-size

Статьи по теме

  • Как изменить размер фоновой картинки через CSS3
  • Масштабирование фона

Статьи по теме

Рецепты CSS

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

background-size | 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.6
4
2.314115.1
Браузеры

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

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

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

Цвет и фон

См. также

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

Рецепты

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

Практика

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

550+ Фоновые изображения для обложек | Скачать бесплатные изображения на Unsplash

550+ Фоновые изображения обложек | Download Free Images on Unsplash
  • A photoPhotos 10k
  • A stack of photosCollections 10k
  • A group of peopleUsers 0

background

wallpaper

texture

pattern

abstract

inspiration

website

creative

Логотип Unsplash

Unsplash+

В сотрудничестве с Jr Korpa

Unsplash+

Разблокировать

художественныйHq фоновые изображенияВдохновляющие изображения – –– –––– – – –– ––– –– –––– – –.

Codioful (Formerly Gradienta)

Оранжевые обои Hd Фото и изображения на обложкеэлегантный

Annie Spratt

Текстуры фоныЦветные обои hdHd белые обои

Ruvim Noga

Hd abstract wallpapersSmoke backgroundsHd color wallpapers

Mona Eendra

Hd yellow wallpaperswallmood

Unsplash logo

Unsplash+

In collaboration with Jr Korpa

Unsplash+

Unlock

experimentalHd wallpapersmystery

Billy Huynh

Hq background imagesSpace images & обоиГалактика фото

Патрик Томассо

HD синий картинкиHD кирпич фоткиHd дизайн обои

Codioful (Formerly Gradienta)

Hd pattern wallpapersGradient backgroundsvivid

Codioful (Formerly Gradienta)

Hd wallpapersHd green wallpapersHd teal wallpapers

Annie Spratt

Brown backgroundsfabricHd red wallpapers

Unsplash logo

Unsplash+

In collaboration with Jr Korpa

Unsplash+

Разблокировать

сюрреализмЗаставка HD картинкиСмешанная техника

Samantha Gades

interiorhomeoffice

RetroSupply

workwritingBook images & photos

Henry Be

Flower imagesNature imagesplant

Jr Korpa

Hd purple wallpapersHd neon wallpapersmystical

Markus Spiske

Hd art wallpapersRainbow images & picturespaint

Unsplash logo

Unsplash+

В сотрудничестве с Jr Korpa

Unsplash+

Разблокировать

Абстрактные фоныФон телефонаФон рабочего стола

Alexander Grey

Hd pink wallpapersLight backgroundsHd pastel wallpapers

artisticHq background imagesInspirational images

Hd orange wallpapersCover photos & imageselegant

Texture backgroundsHd color wallpapersHd white wallpapers

experimentalHd wallpapersmystery

Hq background imagesSpace images & picturesGalaxy images & pictures

Hd узоры обоиГрадиентные фоныяркие

Коричневые фонытканьHd красные обои

workwritingBook images & photos

Hd фиолетовые обоиHd неоновые обоимистический

Абстрактные фоныФоны телефонаФоны рабочего стола

Hd розовые обоиСветлые фоныHd пастельные обои

–––– –––– –––– – –––– – ––– – –– – –– –––– – – –– ––– –– –––– – –.

Hd серые фоткиHd праздник фоткиНовогодние картинки

Hd абстрактные картинкиДым фоныHd цветные обои

Hd желтые обоиwallmood

Hd blue wallpapersHd brick wallpapersHd design wallpapers

Hd wallpapersHd green wallpapersHd teal wallpapers

surrealismHd screen saver wallpapersMixed Media

interiorhomeoffice

Flower imagesNature imagesplant

Hd art wallpapersRainbow images & picturespaint

Related collections

COVER background

31 фото · Куратор Джессика Жан-Франсуа

Фон обложки

23 фото · Куратор Лаура Фингер

Cover Background

16 photos · Curated by Nicholas Petrarch

artisticHq background imagesInspirational images

Texture backgroundsHd color wallpapersHd white wallpapers

Hq background imagesSpace images & picturesGalaxy images & pictures

Hd pattern wallpapersGradient backgroundsvivid

surrealismHd screen saver wallpapersMixed Медиа

Цветок фотографииПрирода фотографииРастение

Абстрактные фоныФон телефонаФоны рабочего стола

Hd grey wallpapersHd holiday wallpapersChristmas images

experimentalHd wallpapersmystery

Hd blue wallpapersHd brick wallpapersHd design wallpapers

Brown backgroundsfabricHd red wallpapers

interiorhomeoffice

Hd purple wallpapersHd neon wallpapersmystical

Hd pink wallpapersLight backgroundsHd pastel wallpapers

––– – –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Оранжевые обои Hd Фото и изображения на обложкеэлегантный

HD Abstract Walpaperssmoke Founkshd Цветные обои

HD Желтая обои для обои

HD Wallpapershd Green Wallpapershd Teal обои

Связанные коллекции

FOURICE FOONAL

31 ФОТО-ТО КРИЦИОНАЯ jess 21. Лаура Фингер

Фон для обложки

16 фото · Куратор Николас Петрарка

workwritingИзображения и фото из книги

Обои в высоком разрешенииРадужные изображения и рисункикраска

Просматривайте изображения премиум-класса на iStock | Скидка 20% на iStock

Unsplash logo

Сделайте что-нибудь потрясающее

css — В чем разница между background-size: cover; и размер фона: 100%;?

спросил

Изменено 2 года, 6 месяцев назад

Просмотрено 24к раз

Когда я устанавливаю для свойства background-size изображения элемента div значение background-size: cover; или размер фона: 100%; оба выглядят одинаково.

В чем разница? Когда я должен использовать укрытие, а когда 100%?

  • css
  • размер фона

1

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

В основном масштаб увеличивается до тех пор, пока самые внутренние края не соприкоснутся со стороной, что означает, что часть изображения может быть обрезана, в отличие от 100%, когда все изображение будет видно.

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

Ваш вопрос : Почему они выглядят одинаково?
Ответ : Если изображение/контейнер квадратные

См. http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover например

0

вот скрипка: http://jsfiddle.net/RS5kX/19/

background-size:100%; = background-size:100% auto; = ширина устанавливается равной 100%, а высота фонового изображения соответствует соотношению сторон изображения.

background-size:cover; означает, что фоновое изображение всегда будет соответствовать всему div , у вас не останется пустых мест в вашем div

 background-size:100% 100%

также не оставит пустого места, но, конечно, это нарушит исходное соотношение сторон изображения

2

Довольно точно background-size: обложка; означает, что изображение будет заполнять элемент, сохраняя его соотношение сторон, а background-size: 100%; просто заставит изображение заполнить 100% ширины элемента.

No related posts.