Фон на веб-странице — это очень важно, поэтому для него предусмотрено немало свойств. Все они начинаются словом «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 стоит слеш (/), которым их значения друг от друга необходимо отделять, дабы не запутывать браузер.
Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.
Сообщить об ошибке
