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

Теория

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

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

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

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

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

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

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

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

Фото


список свойств фоновых изображений

Видео





Автор Cascading Style Sheets