Фоновые изображения

Переклад українською: Фонові зображення

Предусмотрено несколько свойств, которые используются для манипуляции фоновыми изображениями. К счастью свойство background используется со всеми ими.

1
body {
2
    background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
3
}

Это включает в себя следующие свойства:

background-color, с которым мы сталкивались прежде.
background-image, которое представляет собой местонахождение самого изображения.
background-repeat, которое указывает, как изображение повторяется. Это может быть repeat — фактически эквивалент эффекта «мозаики» по всему фону; repeat-y — изображение повторяется по оси Y; repeat-x — изображение повторяется по оси X; no-repeat — изображение показывается только один раз и не повторяется.
background-position, показывает расположение изображения. Это может быть top, center, bottom, left, right или комбинация.

Фоновые изображения могут использоваться для большинства элементов HTML, а не только для страницы целиком (body). Они могут применяться и для простых решений — например, для создания закругленных уголков.

Легко увлечься техникой фоновых изображений и начать размещать их по всей странице. Некоторые визуально гиперактивные люди уверены, что страница выглядит хорошо, когда яркие фотографии накладываются друг на друга, заставляя пользователя «разгадывать» текст. Это, конечно же, экстремальный пример. Наиболее дружественен к пользователю читаемый текст черного цвета на белом фоне или белого — на черном.

Поэтому лучше использовать фоновые изображения там, где на верхнем слое не будет контента, либо делать их очень светлыми. Это также может уменьшить вес файла изображения, если применяется индексированная палитра (например, GIF).

← Классы и идентификаторы | Специфика →