Background size image: CSS background-size property

сокращенная запись — учебник CSS

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

Порядок записи значений background

Свойство background объединяет все свойства для фона. Вы можете перечислить в нем значения для:

• background-image
• background-position
• background-size (CSS3)
• background-repeat
• background-attachment
• background-origin (CSS3)
• background-clip (CSS3)
• background-color

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

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

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

background-image: none;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;

Для примера запишем стиль через свойство background, определив только цвет фона (background-color) и порядок его обрезки (background-clip):

background: content-box #aaa;

Этот код эквивалентен такому коду:

background-image: none; /* осталось по умолчанию */
background-position: 0% 0%; /* осталось по умолчанию */
background-size: auto; /* осталось по умолчанию */
background-repeat: repeat; /* осталось по умолчанию */
background-attachment: scroll; /* осталось по умолчанию */
background-origin: content-box;
background-clip: content-box;
background-color: #aaa;

Здесь мы отметили те свойства, которые не изменились при написании сокращенной записи. И, наверное, вы уже видите, что свойство background-origin

Влияние каскадности на свойства

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

Допустим, мы написали следующий код:

background-color: blue;
background: url(img/cat-transparent-bg.png) no-repeat;

Мы ожидаем увидеть изображение кота на синем фоне, но не тут-то было. Оказывается, второе свойство background перезаписало первое значение background-color на значение по умолчанию (т. е. на transparent). Решить проблему можно, поменяв местами строки:

background: url(img/cat-transparent-bg.png) no-repeat;
background-color: blue;

А теперь мини-задача: если в последней строке этого кода заменить свойство background-color: blue на упрощенное свойство background: blue, как вы думаете, что произойдет с фоновым рисунком и значением no-repeat

Рекомендации по использованию сокращенного свойства

Безусловно, использование «мульти»-свойства background может сэкономить место в таблице стилей и сберечь ваше время, но оно также может и повлечь за собой неприятности, часть из которых мы только что рассмотрели. Поэтому используйте данное свойство с умом. Если вам требуется добавить только цвет фона, лучше используйте для этого отдельное свойство background-color. То же самое касается и всего остального.

Кроме того, если вам потребуется писать стили с учетом поддержки браузера Internet Explorer 8 (или более ранних версий), а в свойстве background у вас будут содержаться значения для свойств CSS3, то браузер не сможет считать их и полностью проигнорирует свойство background. Поэтому свойства из CSS3 рекомендуется записывать по отдельности.

Далее в учебнике: устанавливаем несколько фоновых рисунков для элемента.

свойство -o-background-size | -webkit-background-size свойство CSS (каскадные таблицы стилей)

Вы находитесь здесь: Справочник > CSS > свойства > расширения браузера > -o-background-size

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

Устанавливает размер фонового изображения.

Возможные значения:

Описание значений:

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

Если указано только одно значение размера, оно также влияет на размер по горизонтали и по вертикали.

Пример кода HTML 1:

Этот пример иллюстрирует использование свойств -o-background-size и -webkit-background-size :

 <голова>
    <стиль>
        . resBg {
            отступ: 30 пикселей;
            фон: url("area.gif") без повтора;
            граница: 4 пикселя с зелеными точками;
            -o-размер фона: 60px 60px;
            -webkit-background-size: 60px 60px;
        }
     

<тело>
    
Раздел с фоновым изображением измененного размера
 

Поддерживается тегами:

a, abbr, acronym, address, applet, b, bdo, big, blink, blockQuote, body, button, caption, center, cite, code, dd, del, dfn, dir, div , dl, dt, em, fieldSet, шрифт, форма, h2, h3, h4, h5, H5, H6, hr, html, i, iframe, img, ввод: кнопка, ввод: флажок, ввод: файл, ввод: изображение , ввод:пароль, ввод:радио, ввод:диапазон, ввод:сброс, ввод:отправить, ввод:текст, ins, isIndex, kbd, label, legend, li, marquee, menu, object, ol, p, plainText, pre , q, s, samp, select, small, span, strike, strong, sub, sup, table, tBody, td, textArea, tFoot, th, tHead, tr, tt, u, ul, var, xmp, ввод: поиск

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

-moz-background-clip
-webkit-background-composite
-moz-background-origin

Внешние ссылки:

-webkit-background-size (справочная библиотека Safari) 901 90 Расширенный макет CSS3

Делиться: Дигг Вкусный Реддит Фейсбук Твиттер Дииго

Комментарии пользователей

Размер фона: обложка; — Общее — Форум

Цена Воли (Воля) 12 февраля 2018 г.

Здравствуйте.

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

40227×513 18,2 КБ

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

Вот моя ссылка на общий доступ…
https://preview.webflow.com/preview/willholdingpage?preview=7700fbc54e57363de78de9979445c75f

Может кто-нибудь взглянуть и сообщить мне, что я делаю неправильно?

Заранее спасибо
Уилл

garymichael1313 (Г.Дж.) 12 февраля 2018 г., 23:36 2

Изображение имеет высоту всего 1080 пикселей. Другой 1122. Контент на планшете выше по вертикали.

ВоляЦена (Воля) 12 февраля 2018 г., 23:42 3

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

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

Извините, HTML не моя тема.

(Г.Дж.) 12 февраля 2018 г., 23:46 4

1. Если вам нужно использовать это изображение, оно должно быть больше содержимого.
2. Если нет, я бы использовал векторную графику SVG. Растушуйте его немного. Затем экспортируйте его в большом размере и оптимизируйте, чтобы он был сжат. Добавьте это.

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

ВоляЦена (Воля) 12 февраля 2018 г., 23:52 5

Понял. Спасибо за ответ Гэри.

(Г.Дж.) 13 февраля 2018 г., 00:10 6

Нет проблем, берегите себя и получайте удовольствие!

ВоляЦена (Воля) 13 февраля 2018 г., 1:23 7

Я мог бы вместо этого кодировать вручную…
CSS трюки

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

У меня он работает с разными точками обзора (сортировка), используя «авто», а не «укрытие».