Главная Веб-программинг CSS


Внимание! - CSS background

 Печать E-mail
Автор Игорь Локтев   
05.03.2009 г.

Рейтинг 2.0/5 (9 голосов)

Фон для сайта (свойство CSS background)

  Сегодня мы рассмотрим такое понятие как background и чем он нам может помочь при создании или модификации сайта. Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже.

background-color - задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>: 

/* черный фон сайта */
body {
background-color: #000;
}
 
/* черный фон заголовка, белый цвет шрифта */
h1 {
color: #fff; 
background-color: #000;
}

background-image - используется для вставки фонового изображения, при этом в css указываем ссылку на картинку: 

body {
background-color: #000;
background-image: url ("my-image.jpg");
}

Обратите внимание как указан путь к изображению - это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать правильный путь к изображению.

background-repeat - используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

  • background-repeat: repeat-x - изображение повторяется только по горизонтали
  • background-repeat: repeat-y - изображение повторяется только по вертикали
  • background-repeat: repeat - изображение повторяется по горизонтали и вертикали
  • background-repeat: no-repeat - изображение не повторяется

background-attachment - данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

  • background-attachment: scroll - прокручивается вместе со страницей
  • background-attachment: fixed - при прокрутке фон остается неподвижным

background-position - задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

  • в фиксированных единицах (пикселы, сантиметры)
  • в процентах
  • словесно: - top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).

Рассмотрим примеры:

  • background-position: 20px 50px - изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
  • background-position: 50% 25% - расположено по центру по горизонтали и отступает на 25% сверху.
  • background-position: right bottom - рисунок располагается снизу справа.

Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Например: 

background: #000 url("my-image.jpg") no-repeat fixed left bottom;

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

 

 

Похожие темы

 

Добавить комментарий

Вы можете добавлять комментарии, относящиеся к данной теме. Регистрироваться при этом необязательно.


Защитный код
Обновить

Rambler's Top100