Как задать фоновое изображение, цвета, позиционирование фонового изображения и выравнивание?

Позиционирование фонового изображения

Элементы веб-страницы могут быть украшены фоновыми цветами и фоновыми изображениями, которые можно определить с помощью простых атрибутов.

Указание цвета

Итак, для того, чтобы задать цвет фона определенного элемента веб-страницы, необходимо использовать теги background-color или background-image. В качестве значения атрибута background-color указывается цвет. Например, body {background-color:green;}. В этом случае фон веб-страницы будет полностью окрашен в зеленый цвет.

Указание ссылки

Для атрибута background-image необходимо указать ссылку (относительную или абсолютную) на картинку, которая будет в качестве фона страницы. Пример: body {background-image: url(foto.jpg);}. Ссылка относительная.

Управление фоновым изображением

Давайте подробнее опишем те функции, которые можно применить к фоновому изображению.

  • Фоновое изображение может повторяться. За это отвечает атрибут background-repeat, который может принимать значения: repeat (повторять), repeat-x (повторять по горизонтали), repeat-y (повторять по вертикали), no-repeat (не повторять).
  • Фоновое изображение можно расположить в любом месте веб-страницы. В этом нам поможет атрибут background-position. В зависимости от значения этого атрибута, изображение может быть выровнено по левому краю (left), по правому краю (right), по верхнему краю (top), по нижнему краю (bottom) и по центру (center).
  • Можно задать собственные координаты расположения фонового изображения. Например, body {background-position: 50% 50%; background-image: url(foto.jpg);}. Первая координата указывает на X, а вторая на Y. Значения координат можно задавать абсолютными или относительными.
  • Последняя функция, про которую я вам расскажу - background-attachment. Данный атрибут отвечает за прокрутку фонового изображения. Соответственно, он может принимать два значения: scroll(прокрутка) или fixed (фиксированное положение на странице).

На этом все! Попробуйте самостоятельно применить данные функции в вашей работе.

Читайте также:
Как сделать фон фотографии размытым?
Преимущества использования каскадных таблиц стилей (CSS) при создании сайта

Просмотров: 7427

Оцените статью: 1 2 3 4 5





Комментарии

Комментарий добавил(а): Тимур
Дата: 2012-01-31

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

Написать комментарий




Введите код с картинки