Что означает в background свойстве center center/cover?
Наткнулся на следующий кусок кода
background:url(../img/bg/main_bg.jpg) center center/cover no-repeat;
Не могу понять его. Первый center делает по центру видимо фоновую картинку, второй, самый непонятный, опять по центру, но слэш и cover какой-то , третий параметр это я знаю, не повторять картинку.
Обычно мне всегда такие примеры попадались как ниже , и всё понятно было что куда.
background: #FFD7C4 url(/002/bg1.gif) top left repeat-x;
А в приведенном мной самом первом ничего не понятно.
Ответы (2 шт):
background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit
Про два center - это позиционирование
CSS2.1
background-position: [left | center | right | <проценты> | <значение>] || [top | center | bottom | <проценты> | <значение>] | inherit
CSS3
background-position: <позиция>[, <позиция>]*
Сама позиция задается как:
<позиция> = [left | center | right | <проценты> | <значение>] || [top | center | bottom | <проценты> | <значение>] | inherit.
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
- top left = left top = 0% 0% (в левом верхнем углу)
- top = top center = center top = 50% 0% (по центру вверху)
- right top = top right = 100% 0% (в правом верхнем углу)
- left = left center = center left = 0% 50% (по левому краю и по центру)
- center = center center = 50% 50% (по центру)
- right = right center = center right = 100% 50% (по правому краю и по центру)
- bottom left = left bottom = 0% 100% (в левом нижнем углу)
- bottom = bottom center = center bottom = 50% 100% (по центру внизу)
- bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.
/cover - это размер background-size, который:
background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain
Общая конструкция фона выглядит так:
<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || attachment> || <box> || <box>
Подробнее можно прочитать тут
Как видно на рисунке, мы пишем значения всех свойств через пробел как обычно. Исключением являются свойства background-position и background-size — их необходимо разделять знаком слэша /
Взято отсюда
Что касается двух center, то один - это по оси X, а другой - по оси Y.