Как включить значение фона в свойство стенографического фона?

Я пытаюсь установить фоновое изображение для растягивания до полной ширины и высоты <div>. <div> будет иметь переменный размер, поэтому я использую background-size: cover;

background: url("../images/bkgnd-sidebar.png") no-repeat left top cover;

Я не могу понять, как поместить его в эту сокращенную нотацию и заставить ее работать. Если я перечисляю каждое свойство независимо, он отлично работает, но я надеялся на решение "все-в-одном".

Это работает, но не является предпочтительным:

background-size:cover;
background-image:url('../images/bkgnd-sidebar.png');

Ответы

Ответ 2

Хороший вопрос: от W3C http://www.w3.org/community/webed/wiki/CSS_shorthand_reference

Итак, если вы хотите включить значение фона в синтаксис сокращений, вам необходимо:

  • Явно укажите значения фоновой позиции, даже если это как и по умолчанию  Запишите значения фоновой позиции перед значениями фона.  Поместите косую черту между этими двумя парами значений.

Итак, вы хотели бы сделать что-то вроде этого

background: url(http://www.stanford.edu/dept/CTL/cgi-bin/academicskillscoaching/wp-content/uploads/2013/03/test-anxiety.gif) top left / cover no-repeat;

Смотрите здесь скрипку

http://jsfiddle.net/8Up6V/

Ответ 3

Ниже приведен пример использования параметров запроса, которые будут работать. Некоторые из других ответов немного усложнили параметры. Все, что нужно сделать, это background-size необходимо отделить от background-position косой чертой /:

 background: url("../images/bkgnd-sidebar.png") left top / cover no-repeat;

Ответ 4

Синтаксис сокращения (кратности) фона заключается в следующем:

Фон

: [< bg-layer > ,] * < final-bg-layer >

Где

< BG-слой >= < bg-image > || < & положения GT; [/ < BG-размер > ]? || < повторить стиль > || < & прикрепление GT; || < & коробка GT; || < & коробка GT;

< конечная-BG-слой >= < bg-image > || < & положения GT; [/ < BG-размер > ]? || < повторить стиль > || < & прикрепление GT; || < & коробка GT; || < & коробка GT; || < 'цвет фона' >

... Если один <box> значение присутствует, то оно устанавливает оба 'Background-origin и' background-clip для этого значения. Если два значения присутствуют, то первые исходные фонты и второй "Фон-клип.

  • Двойной бар (||) разделяет две или несколько опций: один или несколько из них должны встречаться в любом порядке.
  • Звездочка (*) указывает, что предыдущий тип, слово или группа имеют ноль или более раз.
  • Значок вопроса (?) указывает, что предыдущий тип, слово или группа не являются обязательными.

Итак, чтобы включить background-size, вы должны указать background-position перед ним и поместить / промежуточный.

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

background: url(...) center / cover;

Все четыре примера ниже используют одно и то же изображение:

h1 {
  font: medium monospace;
}
.test {
  display: inline-block;
}
.test-landscape {
  width: 200px;
  height: 150px;
}
.test-portrait {
  width: 150px;
  height: 200px;
}
.test-lefttop {
  background: url(http://dummyimage.com/400x400/CCC/000000&text=%C3%97) left top / cover;
}
.test-center {
  background: url(http://dummyimage.com/400x400/CCC/000000&text=%C3%97) center / cover;
}
<h1>background-position: left top<h1>
<div class="test test-landscape test-lefttop"></div>
<div class="test test-portrait  test-lefttop"></div>

<h1>background-position: center</h1>
<div class="test test-landscape test-center"></div>
<div class="test test-portrait  test-center"></div>