Изменение фона страницы

Изменение фона страницы

  Если Вы решили изменить фон всего документа, то внесите изменения в тег body
body {
...
}
  Задайте цвет фона с помощью свойства background-color
body {
background-color: #f2f2f2;
}
  Если необходимо сделать фоном какую-либо картинку, то сделайте это через свойство background-image, в значении которого указывается url(путь к картинке)
body {
background-color: #f2f2f2;
background-image: url(textura.gif);
}
  Если текстура имеет небольшие размеры, то она будет растиражирована по горизонтали и вертикали, и займет все пространство. Данное тиражирование можно ограничить при помощи свойства background-repeat.
Для тиражирования текстуры только по горизонтали, свойству background-repeat нужно присвоить значение repeat-x
body {
background-color: #f2f2f2;
background-image: url(textura.gif);
background-repeat: repeat-x;
}
  Для тиражирования текстуры только по вертикали, свойству background-repeat нужно присвоить значение repeat-y
body {
background-color: #f2f2f2;
background-image: url(textura.gif);
background-repeat: repeat-y;
}
  По умолчанию тиражирование начинается сверху слева. Чтобы это изменить, применим к правилу свойство background-position. Это свойство имеет 4 значения:
  • top
  • right
  • bottom
  • left
  • значение отступа в пикселях от левого и верхнего краев
К примеру, для того чтобы тиражировать изображение сверху справа, надо присвоить свойству background-position значение top right
body {
background-color: #f2f2f2;
background-image: url(textura.gif);
background-repeat: repeat-y;
background-position: top right;
}
  Для того чтобы вообще не повторять изображение, свойству background-repeat нужно присвоить значение no-repeat
body {
background-color: #f2f2f2;
background-image: url(textura.gif);
background-repeat: no-repeat;
background-position: top right;
}
  Если Вы хотите расположить изображение не в правом углу страницы, а в правом углу браузера (картинка будет постоянно видна за текстом и не уедет при прокручивании страницы), то необходимо воспользоваться свойством background-attachment: fixed;
body {
background-color: #f2f2f2;
background-image: url(textura.gif);
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
}
  А чтобы расположить изображение в любом месте, а не только в каком-либо из углов, присвоим свойству background-position значение отступа в пикселях от левого и от верхнего краев, к примеру, по 200 и 150 пикселей соответственно
body {
background-color: #f2f2f2;
background-image: url(textura.gif);
background-repeat: no-repeat;
background-position: 200px 150px;
background-attachment: fixed;
}
  Полный список свойств для работы с фоном можно посмотреть в справочнике.