Вы здесь

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

Существует достаточно много свойств, позволяющих манипулировать фоновыми изображениями.

К счастью, свойство background всех их объединяет.

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

Здесь объединяются следующие свойства:

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

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

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

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