Итак, Вы скачали фон с нашего сайта, и теперь не знаете, как его поставить? Просто внимательно прочитайте данную статью.
 
C помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, является заданием настроек для тэга body. Давайте рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства, какое вы сможете увидеть ниже.
 
background-color — задает цвет фона. Можно применять к отдельным элементам (например div) или ко всему сайту через через тэг <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 — используемое в предыдущем примере изображение будет повторяется по всему экрану. Данное свойство (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: #fff url («my-image.jpg») no-repeat fixed left bottom;
 
Если какое-то свойство пропускается, то его значение установлено по умолчанию.
 
Примеры установки:
 
1) Бордюр (изображение повторяется только по вертикали)
 
 
 
body {background: #000000 url(/путь-к-фону.gif); background-repeat: repeat-y;}
 
 
2) Сплошной (изображение повторяется по горизонтали и вертикали)
 
 
body {background: #000000 url(/путь-к-фону.gif); background-repeat: repeat;}