Background css size cover: background-size | htmlbook.ru

Содержание

background-size | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.5+3.0+3.6+2.1+1.0+

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

Версии CSS

Описание

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

Синтаксис

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-image, то по умолчанию изображение отображается в своих реальных размерах. Это не всегда удобно, поэтому в CSS3 появилось новое свойство background-size для регулировки размера фонового изображения.

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

  • auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

    
background-size: auto auto;

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

    
background-size: 250px auto;

    …то высота фоновой картинки будет вычисляться автоматически.

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

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

Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:


background-size: 300px 300px;

Учтите, что изображение может исказиться, если вы не попадете в его пропорции:

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto:

Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

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

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

size | HTML и CSS с примерами кода

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

Фон

Синтаксис

/* Keyword values */
background-size: cover;
background-size: contain;

/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Global values */
background-size: inherit;
background-size: initial;
background-size: unset;

Значения

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

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

Значение по-умолчанию:

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

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

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

Can I Use background-img-opts? Data on support for the background-img-opts feature across the major browsers from caniuse.com.

Описание и примеры

<!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>

Свойство background-size | CSS справочник

CSS свойства

Определение и применение

CSS свойство background-size определяет размер фонового изображения/-ий. Позиционирование фонового изображения внутри элемента определяется свойством background-origin.

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

CSS синтаксис:

background-size:"auto | length | cover | contain | initial | inherit";

JavaScript синтаксис:

object.style.backgroundSize = "150px 150px"

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

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Масштабирование фоновых  изображений в CSS</title>
<style> 
div {
width : 8em; /* устанавливаем ширину блока */
height : 8em; /* устанавливаем высоту блока */
border : 3px solid orange; /* устанавливаем сплошную границу размером 3px оранжевого цвета */
background : url(manul.jpg); /* указываем путь к файлу, который будет использоваться как фоновое изображение */
background-repeat : no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */
color : yellow; /* устанавливаем цвет шрифта желтый */
}
.test   {background-size : auto;}  /* фоновое изображение содержит свою ширину и высоту (значение по умолчанию) */
.test2 {background-size : 100px 100px;}  /* задаем ширину и высоту фонового изображения */
.test3 {background-size : 70% 70%;}  /* задаем ширину и высоту фонового изображения в процентах от родительского элемента */
.test4 {background-size : cover;}  /* масштабируем фоновое изображение под размеры элемента (часть изображения скрывается) */
.test5 {background-size : contain;}  /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */
</style>
</head>
	<body>
		<div class = "test">auto</div>
		<div class = "test2">100px 100px</div>
		<div class = "test3">70% 70%</div><br>
		<div class = "test4">cover</div>
		<div class = "test5">contain</div>
	</body>
</html>

Масштабирование фоновых изображений в CSS (свойство background-size).CSS свойства

Подробно о свойстве CSS Background

 

Каждый элемент в DOM-дереве напоминает прямоугольник, который имеет фоновый слой, он может быть либо полностью прозрачным, либо цветным, либо содержать изображение. Этот фоновый слой находится под контролем 8 свойств CSS (плюс 1-го сокращённого свойства).

background-color

Свойство background-color задает цвет фона для элемента. Это значение может быть любым принятым значением цвета, или ключевым словом transparent.

.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }

Цвет фона рисуется в области блочной модели, указанной в свойстве background-clip. Если также определяются какие-либо фоновые изображения, цветной слой распологается за ними. В отличие от слоев изображений, которых может быть несколько, цветной слой может быть только один для элемента.

background-image

Свойство background-image определяет фоновое изображение (или изображения) для элемента. Это значение обычно представляет собой URL к изображению, определенному в url() нотации. Также может быть использовано значение none, которое будет учитываться в качестве слоя, но пустого.

.left { background-image: url(‘ire.png’); }
.right { background-image: none; }

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

.middle {
  background-image: url(‘khaled.png’), url(‘ire.png’);

  /* Other styles */
  background-repeat: no-repeat;
  background-size: 100px;
}

background-repeat

Свойство background-repeat управляет тем как фоновое изображение заполняет пространство, после того как установлен его размер (при помощи свойства background-size (см. ниже)) и расположение (при помощи свойства background-position (см. ниже)).

Значение этого свойства может быть одним из следующих: repeat-x, repeat-y, repeat, space, round, no-repeat. Кроме первых двух (repeat-x и repeat-y), другие значения могут быть определены или один раз, для оси х и оси у, или для каждой оси по отдельности.

.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }

.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }

background-size

Свойство background-size определяет размер фонового изображения. Это значение может содержать ключевое слово, длину или процент.

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

.left {
  background-size: contain;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
}
.right { background-size: cover; /*Остальные стили такие же как для класса as .left */ }

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

.left { background-size: 50px; /*Остальные стили такие же как для класса .left */ }
.right { background-size: 50% 80%; /*Остальные стили такие же как для класса .left */ }

background-attachment

Свойство background-attachment управляет тем, как фоновое изображение ведет себя при прокручивании страницы, относительно видимой области экрана и элемента. Оно имеет три возможных значения.

Ключевое слово fixed означает, что фоновое изображение фиксируется в видимой области экрана и не двигается, даже когда пользователь прокручивает прокручивает окна. local означает, что фон должен быть закреплен в своем положении в элементе. Если элемент имеет прокрутку и фоновое изображение позиционируется сверху, то при прокрутке элемента вниз, фоновое изображение останется на месте, вне области видимости. И, наконец, scroll означает, что фоновое изображение является фиксированным и не будет прокручиваеться вместе с содержанием элемента.

.left {
  background-attachment: fixed;
  background-size: 50%;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
  overflow: scroll;
}
.middle { background-attachment: local; /* Остальные стили такие же как для класса .left */ }
.right { background-attachment: scroll; /*Остальные стили такие же как для класса .left */ }

background-position

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

Доступны следующие ключевые слова top, right, bottom, left, и center. Мы можем использовать эти ключевые слова в любой комбинации, и если указано только одно ключевое слово, то предполагается что другое равно center.

.top-left {
  background-position: top;
  background-size: 50%;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
}
.top-middle { background-position: right;  /*Остальные стили такие же как для класса .top-left */ }
.top-right { background-position: bottom;  /*Остальные стили такие же как для класса .top-left */ }
.bottom-left { background-position: left;  /*Остальные стили такие же как для класса .top-left */ }
.bottom-right { background-position: center;  /*Остальные стили такие же как для класса .top-left */ }

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

.left { background-position: 20px 70px; /*Остальные стили такие же как для класса .top-left */ }
.right { background-position: 50%; /*Остальные стили такие же как для класса .top-left */ }

background-origin

Свойство background-origin определяет область позиционирования фонового изображения.

Доступные значения следующие: border-box — фон позиционируется относительно границы, при этом линия границы может перекрывать изображение, padding-box  — фон позиционируется относительно края элемента с учетом толщины границы, и content-box — фон позиционируется относительно содержимого элемента.

.left {
  background-origin: border-box;
  background-size: 50%;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
  background-position: top left;
  border: 10px dotted black;
  padding: 20px;
}
.middle { background-origin: padding-box;  /*Остальные стили такие же как для класса .left*/ }
.right { background-origin: content-box;  /*Остальные стили такие же как для класса .left*/ }

background-clip

Свойство background-clip определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

.left{
  background-clip: border-box;
  background-size: 50%;
  background-color: #ffdb3a;
 background-repeat: no-repeat;
  background-position: top left;
  border: 10px dotted black;
  padding: 20px;
}
.middle { background-clip: padding-box;  /*Остальные стили такие же как для класса .left*/ }
.right { background-clip: content-box;  /*Остальные стили такие же как для класса .left*/ }

background

И, наконец, свойство background является обобщающим для других свойств фона. Порядок подсвойств не имеет значения, так как типы данных для каждого свойства различны. Тем не менее, для background-origin и background-clip, если указано только одно значение, оно используется для обоих свойств. Если два, первое устанавливается для свойства background-origin.

Перевод статьи с https://bitsofco.de/

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

размер фона — CSS: каскадные таблицы стилей

Свойство CSS background-size устанавливает размер фонового изображения элемента. Изображение можно оставить до его естественного размера, растянуть или ограничить, чтобы оно соответствовало доступному пространству.

Пространства, не покрытые фоновым изображением, заполняются свойством background-color , и цвет фона будет виден за фоновыми изображениями, имеющими прозрачность / полупрозрачность.

 
размер фона: обложка;
размер фона: содержать;



размер фона: 50%;
размер фона: 3.2em;
размер фона: 12 пикселей;
размер фона: авто;



размер фона: 50% авто;
размер фона: 3em 25%;
размер фона: авто 6 пикселей;
размер фона: авто авто;


размер фона: авто, авто;
размер фона: 50%, 25%, 25%;
размер фона: 6 пикселей, авто, содержать;


размер фона: наследовать;
размер фона: начальный;
размер фона: не задано;

Свойство background-size задается одним из следующих способов:

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

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

Значения

содержат
Максимально масштабирует изображение в пределах своего контейнера без обрезки или растяжения изображения.Если контейнер больше, чем изображение, это приведет к мозаике изображения, если для свойства background-repeat не установлено значение no-repeat .
крышка
Увеличивает изображение до максимального размера, чтобы заполнить контейнер, при необходимости растягивая изображение. Если пропорции изображения отличаются от элемента, оно обрезается либо по вертикали, либо по горизонтали, чтобы не оставалось пустого места.
авто
Масштабирует фоновое изображение в соответствующем направлении, чтобы сохранить его внутренние пропорции.
<длина>
Растягивает изображение в соответствующем размере до указанной длины. Отрицательные значения не допускаются.
<процент>
Растягивает изображение в соответствующем измерении до указанного процента от области позиционирования фона . Область позиционирования фона определяется значением background-origin (по умолчанию поле заполнения). Однако, если для фона значение background-attachment равно fixed , то область позиционирования — это все окно просмотра.Отрицательные значения не допускаются.

Внутренние размеры и пропорции

Вычисление значений зависит от внутренних размеров изображения (ширина и высота) и внутренних пропорций (отношение ширины к высоте). Эти атрибуты следующие:

  • Растровое изображение (например, JPG) всегда имеет внутренние размеры и пропорции.
  • Векторное изображение (например, SVG) не обязательно имеет внутренние размеры. Если он имеет как горизонтальные, так и вертикальные внутренние размеры, он также имеет внутренние пропорции.Если у него нет размеров или только одно измерение, оно может иметь или не иметь пропорций.
  • CSS <градиент> s не имеют внутренних размеров или внутренних пропорций.
  • Фоновые изображения, созданные с помощью функции element () , используют внутренние размеры и пропорции генерирующего элемента.

Примечание: В Gecko фоновые изображения, созданные с помощью функции element () , в настоящее время обрабатываются как изображения с размерами элемента или области позиционирования фона, если элемент SVG, с соответствующей внутренней пропорцией.Это нестандартное поведение.

На основе внутренних размеров и пропорций визуализированный размер фонового изображения вычисляется следующим образом:

Если указаны оба компонента background-size , а не auto :
Фоновое изображение отображается с указанным размером.
Если background-size — это , содержать или обложку :
При сохранении внутренних пропорций изображение визуализируется с максимальным размером, содержащимся в области позиционирования фона или покрывающей ее.Если изображение не имеет внутренних пропорций, оно отображается с размером области позиционирования фона.
Если background-size — auto или auto auto :
  • Если изображение имеет как горизонтальные, так и вертикальные внутренние размеры, оно отображается с этим размером.
  • Если изображение не имеет внутренних размеров и внутренних пропорций, оно отображается с размером области позиционирования фона.
  • Если изображение не имеет внутренних размеров, но имеет внутренние пропорции, оно отображается так, как если бы вместо этого было указано , содержащее .
  • Если изображение имеет только одно внутреннее измерение и внутренние пропорции, оно отображается с размером, соответствующим этому одному измерению. Другое измерение вычисляется с использованием указанного размера и внутренних пропорций.
  • Если изображение имеет только одно внутреннее измерение, но не имеет внутренних пропорций, оно отображается с использованием указанного измерения и другого измерения области позиционирования фона.
Примечание. изображений SVG имеют атрибут preserveAspectRatio , который по умолчанию эквивалентен , содержит ; явный background-size заставляет игнорировать preserveAspectRatio .
Если background-size имеет один компонент auto и один компонент не auto :
  • Если изображение имеет внутренние пропорции, оно растягивается до указанного размера. Неуказанный размер вычисляется с использованием указанного размера и внутренних пропорций.
  • Если изображение не имеет внутренних пропорций, оно растягивается до указанного размера. Неуказанный размер вычисляется с использованием соответствующего внутреннего размера изображения, если таковой имеется.Если такого внутреннего размера нет, он становится соответствующим размером области позиционирования фона.

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

Работа с градиентами

Если вы используете <градиент> в качестве фона и задаете background-size , чтобы использовать его, лучше не указывать размер, который использует один компонент auto или задан используя только значение ширины (например, background-size: 50% ).Рендеринг <градиент> с в таких случаях изменен в Firefox 8 и в настоящее время обычно несовместим между браузерами, которые не все реализуют рендеринг в полном соответствии со спецификацией CSS3 background-size и градиентом CSS3 Image Values. Технические характеристики.

  .gradient-example {
  ширина: 50 пикселей;
  высота: 100 пикселей;
  фоновое изображение: линейный градиент (синий, красный);

  
  размер фона: 25 пикселей;
  размер фона: 50%;
  размер фона: авто 50 пикселей;
  размер фона: авто 50%;

  
  размер фона: 25 пикселей 50 пикселей;
  размер фона: 50% 50%;
}

Обратите внимание, что особенно не рекомендуется использовать измерение в пикселях и измерение auto с <градиент> , потому что невозможно реплицировать рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без зная точный размер элемента, фон которого указывается.

Тип анимации

19 простого списка длины, процента или вычисления

Начальное значение авто авто
Применяется ко всем элементам. Это также относится к :: первая буква и :: первая строка .
Унаследовано нет
Процентное соотношение относительно области позиционирования фона
Вычисленное значение, как указано, но с относительной длиной, преобразованной в абсолютную длину

Мозаика для большого изображения

Давайте рассмотрим большое изображение, изображение логотипа Firefox размером 2982×2808.Мы хотим разделить четыре копии этого изображения на элемент размером 300×300 пикселей. Для этого мы можем использовать фиксированное значение background-size , равное 150 пикселям.

HTML

CSS 

  .tiledBackground {
  background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: 150 пикселей;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
}

Результат

Таблицы BCD загружаются только в браузере

Изменение размера фоновых изображений с помощью background-size — CSS: Cascading Style Sheets

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

Давайте рассмотрим большое изображение, изображение логотипа Firefox размером 2982×2808. Мы хотим (по какой-то причине, вероятно, связанной с ужасающе плохим дизайном сайта) замкнуть четыре копии этого изображения в элемент размером 300×300 пикселей. Для этого мы можем использовать фиксированное значение background-size , равное 150 пикселям.

HTML

CSS 

  .tiledBackground {
  background-image: url (https: // www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: 150 пикселей;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
}

Результат

Вы также можете указать как горизонтальный, так и вертикальный размер изображения, например:

  размер фона: 300 пикселей 150 пикселей;

Результат выглядит так:

На другом конце спектра вы можете увеличить изображение на заднем плане.Здесь мы масштабируем значок 32×32 пикселей до 300×300 пикселей:

  .square2 {
  фоновое изображение: URL (favicon.png);
  размер фона: 300 пикселей;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  граница: сплошная 2px;
  тень текста: белый 0px 0px 2px;
  размер шрифта: 16 пикселей;
}

Как видите, CSS фактически идентичен, сохраните имя файла изображения.

Помимо значений , свойство CSS background-size предлагает два специальных значения размера: содержит и cover .Давайте посмотрим на них.

содержат

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

HTML 
  

  
 Попробуйте изменить размер этого элемента!
CSS 
 .bgSizeContain {
  background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: содержать;
  ширина: 160 пикселей;
  высота: 160 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
  изменить размер: оба;
  переполнение: прокрутка;
}
Результат

cover

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

HTML 
  

  
 Попробуйте изменить размер этого элемента!
CSS 
  .bgSizeCover {
  background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: обложка;
  ширина: 160 пикселей;
  высота: 160 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
  изменить размер: оба;
  переполнение: прокрутка;
}
Результат

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

❮ Объект стиля

Пример

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

документ.getElementById («myDIV»). style.backgroundSize = «60px 120px»;

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

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

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

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

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

Числа, за которыми следуют Webkit, Moz или O, указывают первую версию, которая работала с префиксом.

Имущество
фон Размер 4.0
1.0 Webkit		 9,0 4,0
3,6 млн унций		 4,1
3,0 Webkit		 10,5
10,0 О

Синтаксис

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

объект .style.backgroundSize

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

объект .style.backgroundSize = «auto | length | cover | contain | intial | inherit»

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

позиционирования фона.

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

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

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

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

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

❮ Объект стиля

размер фона · WebPlatform Docs

Сводка

Определяет размер фоновых изображений.

Обзорная таблица

Начальное значение
авто
Относится к
Все элементы
Унаследовано
Нет
Медиа
визуальный
Расчетное значение
для абсолютное значение, иначе процент
Анимационный
Да
Свойство объектной модели CSS
фон Размер
В процентах
см. Текст

Синтаксис

  • размер фона: авто
  • размер фона: содержать
  • размер фона: обложка
  • размер фона: длина
  • размер фона: процент

Значения

авто
По умолчанию.См. Примечания.
содержат
Масштабируйте изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до максимального размера, чтобы и его ширина, и его высота могли уместиться внутри области позиционирования фона.
крышка
Масштабируйте изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до наименьшего размера, чтобы и его ширина, и его высота могли полностью покрывать область позиционирования фона.
длина
Число с плавающей запятой, за которым следует обозначение абсолютных единиц ( см , мм , дюймов , pt или шт ) или обозначение относительных единиц ( em , ex или пикселей ).

Для получения дополнительной информации о поддерживаемых единицах длины см. Справочник по значениям и единицам измерения CSS.

процентов
Целое число, за которым следует процент (%). Процентное значение относится к области позиционирования фона.

Примеры

Базовый список примеров синтаксиса для background-size.

 
размер фона: обложка
размер фона: содержать


размер фона: 50%
размер фона: 3em
размер фона: 12 пикселей
размер фона: авто


размер фона: 50% авто
размер фона: 3em 25%
размер фона: авто 6 пикселей
размер фона: авто авто


размер фона: авто, авто
размер фона: 50%, 25%, 25%
background-size: 6px, авто, содержать

размер фона: наследовать

Структура HTML серии

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

  
 Исходное изображение имеет размер 273 x 286 пикселей и имеет прозрачную область вокруг внешней стороны примерно 45 пикселей. 



  background-size: auto auto;  


  background-size: contain;  


  background-size: cover;  


  размер фона: 20% 25%;  


  background-size: 100px 400px;  


  background-size: 100% 250px;  


  background-size: 100% 250px, 20% 25%;

CSS применен к примеру HTML, показанному выше.

  div {
   ширина: 17%;
   высота: 200 пикселей;
   отступ: 10 пикселей;
   радиус границы: 20 пикселей;
   box-shadow: 2px 2px 10px rgba (0,0,0,0.75);
   плыть налево;
   маржа: 0 20px 20px 0;
   цвет фона: rgba (0,0,0,0.25);
   фоновое изображение: URL (/logo/wplogo_transparent_xlg.png);
 }

 code {
   цвет фона: rgba (255,255,255,0.7);
   отступ: 2 пикселя;
   радиус границы: 5 пикселей
 }

.один {
  размер фона: авто авто;
}

.два {
  размер фона: содержать;
}

.три {
  размер фона: обложка;
}

.four {
  размер фона: 20% 25%;
}

.пять {
  размер фона: 100 пикселей 400 пикселей;
}

.шесть {
  размер фона: 100% 250 пикселей;
}

.Семь {
  фоновое изображение: url (/logo/wplogo_transparent_xlg.png), url (/logo/wplogo_transparent_xlg.png);
  размер фона: 100% 250 пикселей, 20% 25%;
}

Посмотреть живой пример

Банкноты

Замечания

авто Значение для одного измерения разрешается с использованием внутреннего соотношения изображения и размера другого измерения. Если какое-либо из этих значений недоступно, используется внутренний размер изображения.Если внутренний размер изображения недоступен, ему присваивается значение 100%. Если оба значения равны авто , используйте внутреннюю ширину, высоту или и то, и другое изображения. Если изображение не имеет ни внутренней ширины, ни внутренней высоты, его размер определяется как для , содержащего . Отрицательные значения не допускаются. В Windows Internet Explorer 9 фон окна может состоять из нескольких слоев. Количество слоев определяется количеством значений, разделенных запятыми, в свойстве background-image .Каждое из изображений имеет размер, расположение и мозаику в соответствии с соответствующим значением в других свойствах фона ( background-attachment , background-clip , background-origin , background-position , background-repeat и размер фона ). Первое изображение в списке — это ближайший к пользователю слой, следующее закрашивается за первым и так далее.

Связанные спецификации

CSS Backgrounds and Borders Module Level 3
Кандидат в рекомендации

См. Также

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

Фон

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

Атрибуции

Увеличьте размер фона, пожалуйста! — Апартаменты A List Apart

В мире рекламы, стремящемся использовать каждый дюйм среды для представления бренда или продукта, становится все более популярным разрабатывать веб-сайты с полнофункциональным браузером.Используя CSS, этого можно легко добиться. Просто поместите на страницу огромное фоновое изображение с помощью одной строчки кода (перенос строк отмечен » — Ред. ):

Продолжение статьи ниже

  body {
  фон: # 000 url (myBackground_1280x960.jpg) »
центр центр фиксированный без повтора;
}

В первом примере показано центрированное фоновое изображение размером 1280 на 960 пикселей, закрепленное за областью просмотра (оно не прокручивается вместе с документом).

Но какой размер изображения будет достаточно большим? Мониторы и операционные системы быстро развивались, и в результате появился широкий диапазон доступных разрешений экрана.Самые популярные сегодня разрешения — 1024×768 пикселей, 1280×800 пикселей, 1280×1024 пикселей и 1440×900 пикселей. Однако с появлением экранов высокой четкости (1920×1080 пикселей) и профессиональных дисплеев, поддерживающих разрешение до 2560×1600 пикселей, возможно практически все.

Также есть основания для более низких разрешений. Многие люди изменяют размер окна браузера, чтобы заполнить часть экрана, в то время как ряд современных экранов поддерживает только разрешение 800×600 пикселей. И это оставляет множество карманных компьютеров с более низкими характеристиками.

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

Есть несколько обходных путей, однако все они полагаются на элемент HTML img (вместо фона CSS). Они также используют абсолютное позиционирование для слоев и таблиц или сценариев, чтобы разрешить изменение размера. Кроме того, не все эти методы сохраняют пропорции изображения, что приводит к нереалистично растянутому фону.

CSS3 фоны спешат на помощь # section2

Уровень 3 модуля W3C CSS Background and Borders Module (в настоящее время — рабочий проект) определяет свойство background-size , которое соответствует нашим требованиям. Интересные значения (если ссылаться на спецификации W3C):

.

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

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

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

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

Чтобы включить масштабирование фона, добавьте в таблицу стилей следующие объявления:

  body {
  фон: # 000 url (myBackground_1280x960.jpg) »
центр центр фиксированный без повтора;
  -moz-background-size: обложка;
  размер фона: обложка;
}

Свойство background-size уже поддерживается Firefox 3.6 (с префиксом -moz ; Firefox 4 будет использовать обычное свойство CSS3), Chrome 5, Safari 5 и Opera 10.54; и он будет включен в Internet Explorer 9 (он уже доступен в Preview 3). Более старые версии Webkit и Opera уже поддерживают свойство background-size , однако эти реализации основаны на предыдущем проекте, который не включал ключевые слова , содержащие , и , охватывающие .

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

Добавление медиа-запросов CSS3 в микс # section3

Модуль W3C CSS3 Media Queries (рекомендуемый кандидат) определяет условные правила, которые применяются только в определенных диапазонах ширины или высоты. Это позволяет нам реализовать масштабирование фона с минимальной ширины и высоты и так далее. Медиа-запросы поддерживаются Firefox 3.5, Chrome, Safari 3 и Opera 7, а также будет включен в Internet Explorer 9.

Добавляя следующие правила стиля, мы сообщаем браузеру, что не хотим, чтобы фоновое изображение масштабировалось меньше 1024 × 768 пикселей:

  body {
  фон: # 000 url (myBackground_1280x960.jpg) »
центр центр фиксированный без повтора;
  -moz-background-size: обложка;
  размер фона: обложка;
} @media only all and (max-width: 1024px) и (max-height: 768px) {
  тело {
    -moz-background-size: 1024px 768px;
    размер фона: 1024px 768px;
  }
}

Обратите внимание, что разрешение 1024×768 пикселей соответствует соотношению сторон фонового изображения (1280×960 пикселей).При использовании другого соотношения вы получите внезапные скачки масштабирования при изменении размера окна браузера.

В наших последних примерах, четвертом и пятом, мы добавили правило @media , чтобы наше фоновое изображение не масштабировалось меньше 1024 на 768 пикселей. Пример 5 показывает, что, установив для свойства background-position значение left-bottom вместо center-center , мы можем контролировать способ выравнивания фонового изображения в области просмотра.

Возвращение к старым методам # section4

Это захватывающие времена для веб-разработчиков, когда все производители браузеров усердно работают над внедрением новых технологий, таких как HTML5 и CSS3. В результате пришло время пересмотреть старые методы, чтобы увидеть, как то же самое можно делать более разумными и чистыми способами. Хотя циклы обновления Firefox, Chrome, Safari и Opera относительно короткие, будет интересно посмотреть, как быстро люди охватят Internet Explorer 9, так что мы можем начать использовать многие из этих новых методов в ближайшее время в больших масштабах.

Учебное пособие по поддержке блогов

ProPhoto — полноразмерное фоновое изображение

Пользовательский CSS выходит за рамки нашей обычной технической поддержки, поэтому имейте в виду, что мы не сможем предоставить исчерпывающую помощь с кодом CSS

Обычно фоновые изображения применяются к вашему сайту с размером 100% от их нормального размера. Это означает, что изображение шириной 1000 пикселей всегда будет иметь ширину 1000 пикселей, независимо от того, показывает ли ваш экран ширину 600 пикселей или 6000 пикселей.

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

Две разные фоновые техники

Есть два основных ключевых слова, которые вы можете применить к свойству background-size.

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

Как применить код CSS

Чтобы применить одну из этих опций к любому из внешних фоновых изображений сайта, загруженных в «ProPhoto»> «Настроить»> «Фон», ваше правило CSS в «ProPhoto»> «Настроить»> «Дополнительно»> «Пользовательский код» » будет выглядеть так:

  • Участок внешний bg # 1 — корпус
    .немобильный {background-size: cover; высота: 100vh;}
  • Внешний вид сайта bg # 2 —
    body.not-mobile: before {background-size: cover; высота: 100vh;}
  • Внешний вид сайта bg # 3 —
    body.not-mobile # inner-body {background-size: cover; высота: 100vh;}

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

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

При использовании

дополнительных фоновых изображений на определенных страницах

Если вы используете функцию дополнительных фоновых изображений в ProPhoto 5 для применения фона к определенной странице, вам может потребоваться другая версия кода.Например, при применении кода body.page-id-326.not-mobile: прежде, чем отображать ваше изображение на странице с идентификационным номером 326, вы можете использовать этот код для применения размера и высоты:

body.page-id-326.not-mobile: before {background-size: cover; высота: 100vh;}

Как видите, вы просто используете селектор CSS, который применяете к дополнительному фоновому изображению, и следуете за ним с кодом в фигурных скобках {}.

См. Также:

CSS | Свойство background-size — GeeksforGeeks

CSS | Свойство background-size

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

Синтаксис: 

 размер фона: авто | длина | обложка | содержать | начальный | наследование;

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

auto: Используется для установки для свойства background-size значения по умолчанию. Он используется для отображения исходного размера фонового изображения.

  • Синтаксис: 
     background-size: auto;
  • Пример:

    < html >

    0004 0004 титул >

    фоновый размер Свойство

    титул >

    000 000 000 000 000 000 000 body {

    background-image: url (

    background-size: auto;

    background-repeat: no-repeat;

    }

    }

    90 002 стиль >

    головка >

    0004 0004 0004 0004 0004 0005 h3 > размер фона: авто; h3 >

    тело >

    54>

  • Вывод:

длина: Используется для установки ширины и высоты фонового изображения.Первое значение указывает ширину, а второе значение указывает высоту фонового изображения в пикселях, pt, em и т. Д. Если какое-либо значение не указано, то оно устанавливается на авто.

  • Синтаксис: 
     размер фона: длина;
  • Пример:

    < html >

    0004 0004 титул >

    фоновый размер Свойство

    титул >

    000 000 000 000 000 000 000 body {

    background-image: url (

    background-size: 400px 450px;

    background-repeat: no-repeat;

    90 007

    стиль >

    головка >

    0004> 0004 < h3 > размер фона: длина; h3 >

    корпус >

    45

  • Вывод:

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

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

  • Синтаксис: 
     размер фона: обложка;
  • Пример:

    < html >

    0004 0004 титул >

    фоновый размер Свойство

    титул >

    000 000 000 000 000 000 000 body {

    background-image: url (

    background-size: cover;

    background-repeat: no-repeat;

    }

    }

    9 0002 стиль >

    головка >

    0004 0004 0004 0004 0004 0005 h3 > размер фона: крышка; h3 >

    корпус >

    54>

    54

  • Вывод:

Поддерживаемые браузеры: Браузеры, поддерживаемые свойством background-size , перечислены ниже: