Неизвестный background

Растянуть картинку на блок неизвестного размера? Сделать паддинги прозрачными? Сместить background от нижнего правого угла? Можно. Разбираем как.

background-size

Свойство позволяет задать размер фонового изображения для элемента.

• в пикселях — фиксированный размер фонового изображения;
• в процентах — проценты background-size считаются от ширины или высоты самого элемента, а не от картинки;
• auto — исходный размер картинки (по умолчанию) или автоматический расчёт второго значения (подробнее в примере).

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

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

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

See the Pen background-size by AsheGentle (@ashegentle) on CodePen.29275

backround-clip

Хитрость, позволяющая создавать необычные эффекты без дополнительных обёрток. Ведь чем чище вёрстка, тем лучше. Тоже самое можно сделать с помощью большого количества div, а можно и без них.

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

• border-box — фоновое изображение будет начинаться под бордером, и с использованием прозрачных границ его будет видно (используется по умолчанию);
• padding-box — фон не заходит под border, но заполняет padding;
• content-box — фоновое изображение выводится только в области содержимого, padding остаётся прозрачным (это важно!).

See the Pen background-clip by AsheGentle (@ashegentle) on CodePen.29275

Свойство background-clip может использоваться совместно с background-origin — оно указывает откуда позиционировать фон. На примере выше фоновое изображение видно только на указанной области, но начинается оно при этом от верхнего левого угла. Чтобы сместить точку отсчёта и нужен background-origin. Его значения записываются точно так же.

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

Самое интересное произойдёт, если взять несколько фоновых изображений и каждому из них назначить свой clip. Порядок при этом очень важен: изображение, указанное первым, будет выше по оси z. И если ему в качестве вывода указать бОльшую зону (например padding-box, то он перекроет всё остальное). Смотрим!

See the Pen background-clip-another by AsheGentle (@ashegentle) on CodePen.29275

background-position

Это свойство задаёт смещение фона от левого верхнего угла (left top) элемента. Всегда? Нет. Очень нужно подвинуть фон справа снизу? Запросто.

See the Pen background-position by AsheGentle (@ashegentle) on CodePen.29275

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

Неизвестный background становится всемогущим =)