Фон в СSS (CSS background)

Фон в СSS (CSS background)

Фон в CSS (CSS background)В этой статье мы рассмотрим способы установки фона различных элементов с помощью CSS. Фон в CSS имеет несколько свойств:

  • background-color - цвет фона;
  • background-image - фоновое изображение (изображение в качестве фона);
  • background-repeat - повторение фонового изображения;
  • background-position - положение фонового изображения;
  • background-attachment - управления прокруткой фонового изображения;
  • backround - используется для указания нескольких свойств фона сразу.

Цвет фона (background-color)

Ниже приводится пример, который показывает как установить цвет фона для элемента:

<html>
 <head>
 <body>
 <p style = "background-color:yellow;" >
 Этот текст напечатан на желтом фоне</p>
 </body>
 </head>
<html>

Результат будет таким:

Этот текст напечатан на желтом фоне

Фоновое изображение (background-image)

В качестве фона можно использовать любое изображение. При этом нужно прописать ссылку на нужную картинку:

<p style="background-image:url(http://wmz-mail.at.ua/_pu/0/10208643.jpg);">Этот текст напечатан на фоне картинки</p>
 
Вот результат:

Этот текст напечатан на фоне картинки

Повторение фонового изображения (background-repeat)

В следующем примере показано как повторять фоновое изображение если изображение маленькое. Вы можете использовать значение "не повторять" (no-repeat). В этом случае изображение будет отображаться только один раз. По умолчанию background-repeat будет повторять изображение.

<p style="background-image:url(http://wmz-mail.at.ua/_pu/0/10208643.jpg); background-prepeat:repeat">Этот текст напечатан на фоне картинки</p>

Результат будет таким:

Этот текст напечатан на фоне картинки

<<< Предыдущая статья Меню категории Следующая статья >>>
Ставив лайк Вы помогаете сайту :)

Статьи по теме:
Рейтинг:
5.0/5 из 1
Категория: Учебник CSS | Добавил: zaharchuk (15.01.2016)
Просмотров: 2783
Комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]