Наверх

CSS-фон

Фон на веб-странице — это очень важно, поэтому для него предусмотрено немало свойств. Все они начинаются словом «Background». В переводе с английского «Background» и означает «Фон». О правилах оформления фона через CSS и пойдёт речь в статье.

background-color

Мы уже говорили о свойстве color, которое позволяет задать цвет переднего плана элемента, то есть букв текста. background-color устанавливает задний фон любого HTML-элемента: таблицы, абзаца, списка и т. д.

Например, цвет фона всей страницы можно настроить так:

body { background: #EEFFCB; }

background-image

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

Например, картинка background.png хранится в той же папке, что и веб-страница, и вы хотите установить её как фон параграфам этого HTML-документа. Код будет таким:

p { background-image: url(background.png); }

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

Body { background-image: url(”image/background01.png”), url(”image/background02.png”), url(”image/background03.png”), url(”image/background04.png”); }

Очевидно, что без определённого позиционирования выбранные рисунки при отображении будут накладываться друг на друга, причём первое из перечисленных будет самым верхним, последнее — под всеми, задним фоном.

background-repeat

По умолчанию фоновое изображение, если его размер меньше размера элемента, будет заполнять объект полностью, повторяясь с левого верхнего к правому нижнему углу.

Фон мозайкой

Бывают ситуации, когда такое заполнение неприемлемо. Как раз для них и существует свойство background-repeat, которому можно указать следующие значения:

  • repeat. Задано по умолчанию. Результат вы видели на рисунке выше.
  • repeat-x. Картинка будет повторяться только слева направо, по горизонтали. По вертикали не будет, так что заполнит только первый слой.
Фон в первом слое
  • repeat-y. Рисунок будет повторяться по вертикали, но не по горизонтали, то есть идти вдоль левой границы страницы.
Фон столбцом
  • no-repeat. Фон не будет повторяться вообще.
Фон без повторов

background-position

Позволяет задать позицию фоновому изображению, ведь не всегда нужно, чтобы оно отображалось с левого верхнего угла окна браузера. Для позиционирования достаточно указать два значения через пробел: координату по оси X (горизонтальное позиционирование) и координату по оси Y (позиционирование вертикальное). Задавать их можно в любых единицах длины, но для абсолютных значений рекомендуется использовать пиксели (px), а для относительных — проценты (%).

background-position: 200px 350px;

Также картинку можно позиционировать зарезервированными словами.

  • Для горизонтального расположения используются слова left, center и right (по левому краю, по центру и по правому краю соответственно).
  • По вертикали положение задают значения top, center и bottom — позиционирование сверху, по центру и снизу.

Свойство background-repeat позволяет устанавливать в качестве фона несколько картинок и задавать правила так, чтобы изображения не накладывались друг на друга. Чтобы это сделать, достаточно перечислить пары координат для всех фоновых рисунков в одном правиле. Например, позиционировать три картинки можно так:

background-position: center left, 0% 50%, 800px 0px;

background-attachment

Определяет, будет ли фоновая картинка прокручиваться вместе с содержимым страницы или будет оставаться неподвижной. Значения могут быть такими:

  • fixed — фон зафиксирован.
  • scroll — фон разблокирован (прокручивается)
  • local — рисунок прокручивается только с содержимым элемента, но дальше, если элемент уже закончился, не идёт.

Если изображений несколько, для них можно указать правила, перечислив их в одном свойстве background-attachment через запятую:

background-attachment: fixed, scroll, local;

background-clip

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

  • content-box — фон отображается только под содержимым.
  • border-box — выводится и под контентом, и под границами.
  • padding-box — отображается внутри границ.
Варианты отображения фона в пределах границ элемента

background-origin

То же, что и background-clip, с такими же значениями, только задаёт положение относительно границ не текущего элемента, а элемента-родителя.

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

background-size

Свойство указывает браузеру размеры фонового изображения. Вы можете задать их в любых единицах длины (через пробел указывается сначала ширина, потом высота картинки). Если прописано только одно значение, то оно определит ширину, высота при этом останется исходной, то есть такой, как в файле изображения. Чтобы указать только высоту, а ширину оставить оригинальной, свойству background-size нужно задать значения auto размер (например, background-size: auto 300px).

В правиле можно использовать ещё два значения.

  • cover. Масштабирует фон по размерам блока с сохранением исходных пропорций картинки, то есть рисунок не растянется и не станет слишком узким.
  • contain. Помещает изображение внутрь блока, сохраняет пропорции.

background

Позволяет объединить значения перечисленных свойств в одной строке:

background: url("background.jpg") center center / 100px 100px no-repeat content-box;

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

You must have Javascript enabled to use this form.