Работаем с фоном

Для того чтобы присвоить фон всему документу, нужно переопределить тэг 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;
}

Полный список свойств для работы с фоном можно посмотреть в справочнике.

Практическая часть

Работаем с текстом

Реклама в разделе: