Background css3: background-attachment — CSS: Cascading Style Sheets

background — CSS — Дока

1. Кратко
2. Пример
3. Как пишется
4. Подсказки

Кратко

Скопировано

Шорткат, позволяющий задать все свойства фона разом. Объединяет в себе:

• background-attachment;
• background-clip;
• background-color;
• background-image;
• background-position;
• background-repeat;
• background-size.

Пример

Скопировано

Код ниже задаёт чёрную заливку фона, фоновую картинку bkg.png, которая не будет повторяться, будет расположена по центру по вертикали и горизонтали, а также закроет всю площадь родителя.

div {  background: #000000 url("bkg.png") no-repeat center / cover;}
          div {
  background: #000000 url("bkg. png") no-repeat center / cover;
}

Как пишется

Скопировано

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

⚠️

В произвольном порядке записи свойств есть исключение: в паре position / size порядок записи только такой, через слэш. А ещё, если опустить size, то position сработает, но если опустить position, то size не сработает.

div {  /* Сработает */  background: url("bkg.png") center / cover;  /* Сработает */  background: url("bkg.png") center;  /* Не сработает */  background: url("bkg.png") cover;}
           div {
  /* Сработает */
  background: url("bkg.png") center / cover;
  /* Сработает */
  background: url("bkg.png") center;
  /* Не сработает */
  background: url("bkg.png") cover;
}

Лучше не полагаться слишком на это поведение и использовать полные записи: background-position и background-size.

Ни одно из значений не является обязательным, поэтому ненужные можно смело опустить.

Подсказки

Скопировано

💡 Как и с любым шорткатом, со свойством background нужно обращаться осторожно. Если потребуется переопределить всего одно из заданных значений, то нужно будет переписать и все остальные.

💡 Если в рамках шортката не задано значение для какого-то из свойств и в коде ниже оно не прописано, то свойству устанавливается значение по умолчанию.

💡 Записанные выше отдельные свойства переопределяются заданным ниже свойством background.

Оценка материала

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

Предыдущий материал

←

will-change

ctrl + alt + ←

Следующий материал

→

background-color

ctrl + alt + →

Новая функция фонового положения в CSS | by Elad Shechter

Чтение: 3 мин.

·

25 июня 2018 г.

Всем привет. Я предполагаю, что большинство из вас использовали или имеют опыт работы со свойством background-position CSS, но, возможно, вы не знали, что это смещение позиционирования фоновых изображений.

(Это сообщение было первоначально опубликовано в июне 2013 года и обновлено, поскольку оно актуально и сегодня)

В background-position, до появления CSS3, вы должны были устанавливать позицию в верхнем левом углу элемента.
Например:

 div{ 
 background-position: 20px 40px; 
 /*  20 пикселей слева и 40 пикселей сверху  */ 
 } 

Проблема заключалась в том, что невозможно было определить точное положение по другому ориентиру, например снизу/справа. Вы можете начать только с левого верхнего!

Раньше мы считали, что можем устанавливать только такие значения, как: фоновая позиция: справа внизу или фоновая позиция: 70% 80% (70% слева, 80% сверху), но мы не могли установить значение 20 пикселей справа и 20 пикселей снизу, например.

Чтобы решить эту проблему, CSS3 предоставил нам возможность определить точку отсчета для нашего позиционирования и тем самым определить нашу точку 0,0.

Вместо того, чтобы записывать только 2 значения (горизонтальная и вертикальная точки слева вверху), CSS3 теперь позволяет нам записывать начальную точку горизонтального и вертикального положения вместе с их смещениями, например: справа 10 пикселей снизу 20 пикселей (всего 4 значения ).

Создадим пример:

Сначала создадим пустой DIV с некоторыми стилями:

HTML

CSS

 .box{ 
 width:300px; 
 высота: 300 пикселей; 
 цвет фона:#ddd; 
 отступ: 10 пикселей; 
 граница: сплошная 3 пикселя #333; 
 радиус границы: 10 пикселей; 
 } 

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

 .box{ 
  background:url(images/image.jpg) без повторов; 
 размер фона: 150 пикселей 150 пикселей; 
 } 

И, наконец, мы добавим значение New Background Position.