Background-image: установка фонового изображения

Возможность задать фоновое изображение для элемента при помощи CSS — это своего рода волшебная палочка, ключ к созданию поистине впечатляющего дизайна. Используя фоновые рисунки, можно существенно преобразить внешний вид страницы, задать необходимый тон и настроение. Просто взгляните на несколько примеров ниже, и вы поймете, о чем идет речь:

Как видим, фотографии и иллюстрации позволяют сделать дизайн уникальным, выделить его среди других, сделать запоминающимся и ярким.

В данном уроке мы познакомим вас с одним из нескольких свойств, отвечающих за настройку фона в CSS — это свойство background-image. В следующих уроках мы рассмотрим остальные свойства, а также сокращенную запись background.

Возможности свойства CSS background-image

Свойство background-image устанавливает выбранное изображение в качестве фона элемента. В зависимости от цели, можно задать графический фон как для отдельного блока, так и для всей страницы. В качестве единственного значения принимается URL-адрес графического файла. Запись выглядит так:

div {
    background-image: url(/img/bg.jpg); /* в круглых скобках — URL картинки */
}

В скобках можно указывать как полный URL-адрес, так и относительный путь. Если вы новичок и не знакомы с понятиями полного и относительного путей, тогда следующая страница учебника — для вас. Если вы уже знаете, о чем идет речь, можете пропустить следующий урок и переходить далее.

Далее в учебнике: что такое относительный и абсолютный путь к файлу.