Фон является важной частью веб-страницы. По умолчанию он имеет белый цвет. Но язык HTML предоставляет несколько вариантов изменения его свойств. В интернете большинство сайтов — с красочным фоном, в том числе с анимацией. На них присутствует различная графика или фоновые изображения. Настройка стиля фона для веб-сайтов осуществляется с помощью атрибута <style> - background в HTML. Существует несколько свойств CSS, используемых для настройки фона элемента.
Атрибуты для изменения параметров фона
В коде, написанном на языке HTML, background устанавливается как для всей страницы, так и для отдельных ее элементов. Ранее для этого использовался тег <body>, но теперь подобная практика считается устаревшей. Атрибут применялся до спецификации 4.01 и так записывался в HTML: <body background="">. Сейчас самый простой способ для изменения значения по умолчанию — это задать свойства атрибуту background-color для тега <body>.
Существует пять основных атрибутов, которые используются в HTML и CSS для изменения фона:
- -color — указывает, какой цвет будет использоваться для заливки;
- -image — устанавливает изображение для фона;
- -position — указывает, куда поместить фоновое изображение;
- -repeat — определяет, является ли изображение повторяющимся;
- -attachment — определяет, будет ли изображение прокручиваться вместе со страницей;
- -size — задает фону определенный размер;
- -origin — определяет область для позиционирования фонового изображения;
- -clip — определяет, как фоновое изображение или фоновый цвет отображается под границами элемента.
Первые пять свойств могут быть объединены в один короткий атрибут - background. Атрибут работает в браузерах Firefox, Safari, Opera, IE8. Только в устаревших IE7 и IE6 фон не включает в себя границы.
Как изменить цвет фона в HTML
Атрибут “цвет фона” (background-color в HTML и CSS) заполняет страницы сплошным цветом. Существует несколько способов задать цвет, используя разные форматы:
- -color: red;
- -color: rgb(0, 0, 255);
- -color: #2500ff.
Для фона может быть установлено свойство transparent, отвечающее за степень прозрачности и позволяющее сделать любые элементы под ним видимыми.
Как установить фоновую картинку
Background-image — это свойство, позволяющее указать изображение, которое будет отображаться вместо фона. Оно задается при помощи кода CSS и языка HTML: background-image: url(image.jpg). Код очень прост, но для того чтобы он работал, картинка должна находиться в той же папке, что и файлы со стилями. Если это не так, в скобках нужно указать правильный адрес, например: background-image: url(images/image.jpg). Фоновое изображение может быть использовано в сочетании с background-color. Если оно не повторяющееся, то остальное, не закрытое картинкой пространство, будет иметь цвет, заданный в этом свойстве.
Положение фона
Атрибут CSS и HTML background-position управляет расположением фонового изображения и определяет, где именно оно находится в элементе. С его помощью можно указать, где будет находиться верхний левый угол изображения относительно верхнего левого угла элемента. Сначала в свойстве записывается положение по горизонтальной оси координат, а затем - по вертикальной. Для этого удобнее использовать пиксели.
Например:
- -position: 0 0 — используется по умолчанию и указывает на расположение фона в верхнем левом углу элемента;
- -position: 100px 0 — сдвинет изображения вправо;
- -position: -100px 0 — сдвинет изображение влево;
- -position: 0 100px — опустит изображение вниз.
Атрибут background-position также работает с другими значениями, ключевыми словами и процентами. Они могут быть полезны, если размер элемента не задан в пикселях.
Как использовать ключевые слова для расположения фона
Ключевые слова можно использовать для задания координат по горизонтальной и вертикальной оси, при этом неважно, в какой последовательности они записываются. Варианты ключевых слов для горизонтальной оси:
- left;
- center;
- right.
Для вертикальной оси:
- top;
- center;
- bottom.
При работе с другими единицами измерения сначала задаются координаты по горизонтальной оси, а затем по вертикальной. Например, background-position: bottom right. Процентные значения используются аналогичным образом. При этом точка отсчета находится в верхнем левом углу окна браузера. Пример использования процентов: background-position: 100% 50%. Это значит, что изображение сместится вправо и окажется в центре правой части элемента. Тот же эффект можно получить, если использовать свойство: right center. Если применять значение background-position: 100% 100%, тогда фон окажется в правом нижнем углу элемента.
Повторение фона
По умолчанию при установке изображения в качестве фонового, оно повторяется как по горизонтали, так и по вертикали, пока не будет заполнено все окно браузера или элемент. Но иногда требуется, чтобы изображение показывалось только один раз или располагалось только в одном направлении. Для этого в CSS и HTML для background понадобятся следующие атрибуты:
- -repeat: repeat — по умолчанию, изображение повторяется до полного заполнения элемента;
- -repeat: no-repeat — изображение не повторяется и используется на странице только один раз;
- -repeat: repeat-x — повторение только по горизонтальной оси;
- -repeat: repeat-y — повторение только по вертикальной оси;
- -repeat: inherit — браузер использует значение, присвоенное родительскому элементу.
Атрибут для полосы прокрутки
В HTML background-attachment определяет, что происходит с картинкой, когда пользователь прокручивает страницу. У этого атрибута есть несколько свойств: scroll, fixed и inherit. Inherit сообщает, чтобы background-attachment наследует свойство своего родителя. Для правильного использования background-attachment, нужно задуматься о том, как пользователь будет взаимодействовать с окном просмотра. Окно просмотра — это раздел вашего браузера, который отображает веб-страницу. При прокрутке сайта вниз, оно не перемещается. Вместо этого содержимое страницы прокручивается вверх, но создается впечатление, что в окне браузера страница прокручивается вниз.
При установке свойства HTML background-attachment: scroll, браузеру сообщается, что фон должен прокручиваться вместе с элементом. Фон “прилипает” к элементу и прокручивается, пока не исчезнет. Это значение по умолчанию для background-attachment. Но когда устанавливается свойство background-attachment: fixed, то фон должен оставаться на своем месте и не сдвигаться вместе с контентом. При прокрутке страницы вниз, он всегда остается видимым.
Как коротко записать свойства background
Вместо того, чтобы каждый раз писать отдельно все эти правила, их можно объединить их в одно и записать в следующем виде: background: <color> <image> <position> <attachment> <repeat>. И не нужно указывать каждое значение отдельно. Если свойство не используется, вместо него будет срабатывать значение по умолчанию. Важно отметить, что фоновое изображение появляется только в тех областях, где присутствует родительский элемент. Даже когда оно расположено относительно окна браузера, то не будет отображаться, если его родительский элемент не виден. В CSS3 можно использовать более одного изображения для фона элемента. Код будет таким же, как CSS2, только адреса отдельных изображений нужно отделить запятой. Первое из них будет расположено в верхней части элемента, а последующие просто наслоятся на него.
Свойство background-size
Иногда для сайта нужно задать фон определенного размера. Атрибут , который для этого используется в HTML — background-size. У этого свойства существует ряд возможных значений:
- -size: contain — масштабирует изображение таким образом, чтобы оно соответствовало элементу, сохраняя при этом пиксельное соотношение сторон;
- -size: cover — разворачивает изображение для заливки элемента, сохраняя пропорции;
- -size: 100px 100px — масштабирует изображение до указанных размеров;
- -size: 50% 100% - масштабирует изображение до указанных размеров, проценты относятся к размеру содержащего элемента.
Размер background в HTML для Firefox до версии 4.0 задается нестандартным свойством -moz-background-size. Аналогично для Opera до версии 10.53 потребуется прописать -o-background-size.
Свойство background-origin
Свойство background-origin используется в сочетании с background-position для позиционирования фонового изображения. Применяется, если background-attachment задано как fixed. Его параметры можно отсчитывать от границ, отступов или содержимого элемента.
- -origin: border-box; background — позиция рассчитывается от границы.
- -origin: padding-box; background — позиция рассчитывается из поля заполнения.
- -origin: content-box; background — позиция рассчитывается на основе содержимого элемента.
Варианты использования фонового изображения
Кроме очевидной декоративной пользы фона, его можно использовать и для других целей. Например, если в CSS добавить свойство float для смещения элементов, сложно гарантировать, что два или более столбца окажутся одинаковой ширины. Если они различны, то фон одного из столбцов будет оканчиваться раньше, чем фон другого. Избежать подобного эффекта можно, если использовать отдельный фон для каждого из столбцов. Но гораздо проще применить одно фоновое изображение к их родительскому элементу. Еще одно возможное применение — декорирование неупорядоченных списков. Буллиты в них могут выглядеть не слишком привлекательно, поэтому их лучше скрыть и заменить на фоновое изображение.
Шрифты вместо фона в HTML: background font
Выбор шрифтов для оформления сайтов в интернете очень ограничен. Можно сделать оригинальные шрифты, но они требуют от пользователя включения поддержки JavaScript. Более простое решение, работающее в любом браузере -создание изображения из текста и использование его в качестве фона для элемента. Если нужно, чтобы при этом текст оставался в разметке для поисковых систем и программ чтения с экрана, достаточно просто назначить класс для элемента, оставить текст в описании и добавить картинку через CSS. При этом браузеры будут показывать надпись, используя не пользовательский шрифт, а именно тот, что выбрал дизайнер.
Новое свойство — background-break
В CSS3 появилось нововведение: элементы могут быть разделены на отдельные блоки, строки и страницы. Свойство background-break определяет то, как фон отображается в разных окнах.
Возможные значения:
- -break: continuous — значение по умолчанию. Обрабатывает блоки, как будто между ними нет пространства;
- -break: bounding-box — учитывает пространство между блоками;
- -break: each-box — обрабатывает каждый блок в элементе отдельно и повторно рисует фон индивидуально для каждого из них.
Существует еще множество свойств, помогающих настроить отображение фона, здесь описаны самые распространенные. Знания приходят с опытом, поэтому практика — лучший способ выучить CSS и HTML.
