Свойство background
Как я уже упоминала ранее, каждый элемент в дереве документа по факту является прямоугольной коробкой. Каждая из этих коробок имеет фон, который может быть полностью прозрачным, залит сплошным цветом или содержать картинку. Фон регулируется при помощи 8 CSS свойств (плюс один шорткат).
background-color
Свойство background-color задает цвет для фона элемента. Значением может быть любое допустимое значение цвета или ключевое слово transparent.
Цвет фона отрисовывается в той области блока, которая обозначена при помощи свойства background-clip. Если вы так же установите фоновую картинку, то цветной слой отрисуется за ней. В отличии от слоя с изображением, который может содержать несколько картинок, мы можем задать только одно значение для слоя цвета.
background-image
Свойство background-image устанавливает фоновое изображение (или несколько изображений) для элемента. Обычно значением является адрес картинки, который прописывается внутри конструкции url(). Значение none так же может быть использовано. Слой будет учитываться, но он будет пустым.
Мы так же можем указать через запятую несколько фоновых изображений. Каждое последующее изображение будет помещаться за предыдущим.
background-repeat
Свойство background-repeat отвечает за “плиточную раскладку” картинки после того, как она приобрела свои конечные размеры (заданные свойством background-size) и была спозиционирована (при помощи background-position).
Значением этого свойства может быть одно из ключевых слов — repeat-x, repeat-y, repeat, space, round, no-repeat. Кроме первых двух (repeat-x и repeat-y), остальные значения могут быть заданы один раз для обеих осей одновременно или для каждой по отдельности.
background-size
Свойство background-size определяет размер фонового изображения. Значением могут быть ключевые слова, точные размеры или размеры в процентах.
Ключевыми словами являются contain и cover. Ключевое слово contain будет масштабировать изображение до наибольшего размера при условии, когда его ширина или высота могут поместится в пределы области блока. С другой стороны cover масштабирует картинку до минимально возможного размера чтобы закрыть всю область блока.
В случае точных размеров и размеров в процентах мы можем указать значения для ширины и высоты фоновой картинки. Значение в процентах будет рассчитываться от размера элемента.
background-attachment
Свойство background-attachment контролирует, как фоновое изображение будет прокручиваться по отношению к видимой области страницы и элементу. Есть три доступных значения.
Ключевое слово fixed означает, что фоновое изображение фиксируется на экране и не двигается при прокрутке страницы. local означает, что фон закреплен на его позиции в элементе. Если у элемента будет полоса прокрутки, а фоновое изображение находится вверху, при прокрутке элемента вниз фоновое изображение останется вне поля видимости. И наконец, scroll означает, что изображение фона фиксируется и не прокручивается даже если элемент имеет полосу прокрутки.
background-position
Это свойство, в сочетании со свойством background-origin, определяет, где будет располагаться фоновое изображение. Значением может быть ключевое слово, число или проценты и мы можем указать положение вдоль осей x и y.
Доступные ключевые слова: top, right, bottom, left и center. Мы можем использовать эти ключевые слова в любых комбинациях. Если указано только одно ключевое слово, то второе значение по умолчанию будет center.
Для значения в числах или процентах мы можем указать отдельно положение по оси x и оси y. Процентное значение высчитывается по отношению к размерам элемента.
background-origin
Свойство background-origin определяет, какая область элемента будет занята фоновым изображением.
Доступны значения: border-box, которое позиционирует изображение по границам область (Border Area), padding-box располагает картинку, используя модель Padding Area и content-box, которое использует модель Content Area.
background-clip
Свойство background-clip отвечает за то, как фон будет закрашен. Как и свойство background-origin , оно основывается на блочной модели.
background
И, наконец, свойство background является обобщающим для всех перечисленных выше свойств. Порядок перечисления значений не имеет значения, поскольку тип данных разный. Тем не менее, для свойств background-origin и background-clip, если указана только одна блочная модель, то она применяется для обоих свойств. Если указываете два значения, то первое будет присвоено свойству background-origin.
Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!
background-position
background-position allows you to set the placement of a background-image on the element it is applied to. background-position generally takes two values, which set the horizontal and vertical position of the background image inside the element.
Overview table
Syntax
- background-position: 30% 15%, 40% 80%, 10px 10px
- background-position: length length
- background-position: percentage percentage
- background-position: percentage
- background-position: bottom length right length
- background-position: left top
Values
Examples
A simple set of five divs.
This CSS applies the same background image and basic styling to each div, but then each div is given a different background position to vary where the background image is placed.
An outer container div with several inner divs.
Every inner div is given the same basic styling, and has the same background image applied to it. Each individual div is then given different top and left values to position it in a different place, and a different background-position value to display a different sprite. Each sprite is 128 x 128 px, and the inners divs are set to 128 x 128 px in size, so only a single sprite will be displayed at once by each of them. You need to get the background positions right, so that a whole sprite is displayed, not a part of two sprites.
Фон в CSS – памятка для начинающих
При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?
Работа с фоном в CSS
С помощью свойства background можно задать положение, цвет, изображение, повторяемость и привязку фона, как для отдельных элементов, так и полностью для всего сайта, что по своей сути, кстати, является заданием определённых настроек для тега <body>. Рассмотрим все свойства, которые связаны с заданием фона.
background-color
Задаёт цвет фона. Его можно применять как к отдельным элементам <h1>, <p>, так и ко всему веб-сайту с помощью тега <body>.
background-image
Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.
Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.
background-repeat
Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.
Оно может иметь несколько значений:
- background-repeat: repeat-x — повторение по горизонтали;
- background-repeat: repeat-y — повторение по вертикали;
- background-repeat: repeat — повторение и по горизонтали и по вертикали;
- background-repeat: no-repeat — изображение не повторяется.
Например, повторение по горизонтали выглядит так:
background-attachment
Это свойство определяет фиксирование фонового изображения при скроллинге:
- background-attachment: scroll — фон прокручивается вместе со страницей;
- background-attachment: fixed — фон остаётся неподвижным.
background-position
Данное свойство определяет расположение фоновой картинки относительно экрана. Значения свойства представляют собой набор вертикальных и горизонтальных координат, отсчет которых начинается с верхнего левого угла.
Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .
- background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
- background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:
gradient
Плавный переход от одного цвета к другому, причем переходов допускается несколько.
Использование градиента можно наглядно продемонстрировать в примере кода:
Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.
Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.
Работа с размером фона в CSS
В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.
Существует несколько способов, позволяющих определить размер:
Абсолютное изменение размера
Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.
Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:
Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.
Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:
Относительное изменение размера
Если применять проценты, размер будет основываться не на изображении, а на элементе.
То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.
Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.
Масштабирование до максимального размера
В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.
Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.
Такой фон страницы будет автоматически подгоняться под любое разрешение:
Заполнение фоном
Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.
В том случае, если соотношения сторон различаются, картинка обрежется:
Масштабирование сразу нескольких фонов
Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:
Создание полупрозрачного фона в CSS
Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.
Особенность данного свойства заключается в том, что прозрачность действует не только на фон, но и на все дочерние элементы. После увеличения прозрачности, и текст и фон станут полупрозрачными.
Пример создания полупрозрачного блока:
Однако достаточно часто полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным для читабельности.
В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.
Пример задания прозрачного фона:
Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!
Background-position: позиционирование фона
Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y .
Значения background-position
В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.
Ключевые слова для горизонтального позиционирования
- left — фоновый рисунок прилеплен к левой стороне элемента;
- center — фоновый рисунок расположен в центре оси x;
- right — фоновый рисунок прилеплен к правой стороне элемента.
Ключевые слова для вертикального позиционирования
- top — фоновый рисунок прилеплен к верхней стороне элемента;
- center — фоновый рисунок расположен в центре оси y;
- bottom — фоновый рисунок прилеплен к нижней стороне элемента.
Сокращенная запись для двух осей
Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).
Ниже — различные примеры позиционирования фона с помощью ключевых слов:
Значения можно менять местами — они будут работать так же.
Если вы установили повтор фона с помощью свойства background-repeat , то background-position будет определять, от какой точки будет начинаться дублирование изображения.
Для позиционирования фона можно использовать и одно значение для двух осей сразу:
Точные значения в единицах измерения CSS
Вы можете управлять расстоянием фона от левого и верхнего краев элемента с помощью точных значений, указанных в единицах измерения CSS (например, в пикселях либо em). Пример:
Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).
Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:
Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.
Процентные значения
Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.
Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:
Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.
Комбинирование значений
Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:
Важно: фоновые изображения и печать
Как правило, при печати страницы фоновые изображения не отображаются. Учитывайте это при работе с важной графикой — например, логотип компании, карту проезда и другие иллюстрации, содержащие важную информацию, рекомендуется добавлять через тег <img> .
Поддержка браузерами
Запись background-position с двумя параметрами поддерживается всеми используемыми браузерами.
Запись с четырьмя параметрами для отсчета от правой и нижней сторон работает только в IE9+, Firefox 13+, Chrome 25+, Safari 7+.
Свойства background-position-x и background-position-y не поддерживаются браузером Firefox вплоть до 48-й версии, а также не воспринимаются мобильными браузерами Opera Mini и Opera Mobile до версии 12.1.
Подробную информацию вы всегда можете посмотреть на сайте Caniuse.com.
Далее в учебнике: background-attachment — фиксация фона.