Очень часто при верстке html страниц требуется задавать фон тому или иному элементу. В данном уроке мы рассмотрим, каким образом можно задавать фон припомощи CSS.
Должен отметить, что для создания фона в CSS имеется больше возможностей, чем у HTML, да и способы, с помощью которых можно задавать фон в html в принципе устарели.
Для работы с фоном в CSS имеется несколько свойств. Разберем их по порядку.
background-color – задает цвет фона.
При помощи этого свойства, возможно, задавать цвет фона практически для любых элементов, будь то фон страницы, блока или текста. Цвет фона задается следующим образом: background-color:#CCFFCC; где #CCFFCC – это значение цвета. Для того чтобы посмотреть как это работает, создайте html страничку содержащую следующий код:
Code
<html>
<head>
<title>Фон в CSS</title>
<STYLE>
body {background-color:#CCFFCC;}
p {background-color:#FFFF99;}
</STYLE>
</head>
<body>
<p>Пример текста расположенного на желтом фоне</p>
</body>
</html>
В данном случае при помощи свойства background-color был задан светло зеленый цвет (#CCFFCC) фону страницы и желтый цвет (#FFFF99) фону текста.
background-image – задает фоновый рисунок.
При помощи данного свойства задавать фоновый рисунок можно практически для любого объекта. Задается следующим образом background-image:url('fon.gif'); где url('fon.gif') это путь к изображению, если ваше изображение лежит в той же папке что и сама html страничка то путь будет выглядеть как и в этом случае, если же изображение, например, лежит в папке images то путь к изображению будет выглядеть так: url('images/fon.gif').
Можете попробовать сохранить это маленькое изображение в скобках ( fon ), в ту папку, где лежит ваша страничка (для этого кликните по нему правой кнопкой мыши и выберите пункт “Сохранить изображение”), а в саму страничку вставить следующий код:
Code
<html>
<head>
<title>Фон в CSS</title>
<STYLE>
body {
background-color:#CCFFCC;
background-image:url('fon.gif');}
p {background-color:#FFFF99;}
</STYLE>
</head>
<body>
<p>Пример текста расположенного на желтом фоне</p>
</body>
<html>
В результате у вас должен получиться следующий фон:
background-repeat – определяет будет ли повторяться фоновое изображение и если будет то каким образом. У этого свойства существуют следующие значения:
repeat – изображение будет повторяться как по вертикали, так и по горизонтали;
repeat-x – изображение будет повторяться только по горизонтали;
repeat-y – изображение будет повторяться только по вертикали;
no-repeat – изображение не будет повторяться.
Например создадим фон который будет повторяться только по вертикали, для этого в наш код необходимо добавить следующее background-repeat: repeat-y, полностью он будет выглядеть так:
Code
<html>
<head>
<title>Фон в CSS</title>
<STYLE>
body {
background-color:#CCFFCC;
background-image:url('fon.gif');
background-repeat: repeat-y;}
p {background-color:#FFFF99;}
</STYLE>
</head>
<body>
<p>Пример текста расположенного на желтом фоне</p>
</body>
</html>
В результате наш фон будет отображаться так:
background-attachment – определяет будет ли фон перемещаться вместе с содержимым страницы при скроллинге или нет. Имеет следующие значения:
fixed – фон будет оставаться на месте, а содержимое страницы будет перемещаться;
scroll – фон будет перемещаться вместе с другим содержимым страницы;
Задается это свойство так background-attachment: fixed; весь код:
Code
<html>
<head>
<title>Фон в CSS</title>
<STYLE>
body {
background-color:#CCFFCC;
background-image:url('fon.gif');
background-repeat: repeat-y;
background-attachment: fixed;}
p {background-color:#FFFF99;}
</STYLE>
</head>
<body>
<p>Пример текста расположенного на желтом фоне</p>
</body>
</html>
background-position – дает возможность позиционировать фоновое изображение. При помощи данного свойства можно смещать изображение относительно левого верхнего угла элемента.
Оно имеет два значения: первое, на сколько ваше фоновое изображение будет смещаться от левого края и второе на сколько оно будет смещаться от верха. Для того чтобы посмотреть как это работает сохраните изображение, которое Вы видите сверху, в ту папку, где находится ваша html страница, а в саму страницу вставьте следующий код:
Code
<html>
<head>
<title>Фон в CSS</title>
<STYLE>
body {
background-color:#CCFFCC;
background-image:url('fon.gif');
background-repeat: repeat-y;}
p {background-color:#FFFF99;
background-image:url('t.jpg');
background-repeat: no-repeat;
background-position: 30px 20px;}
</STYLE>
</head>
<body>
<p> Пример позиционирования изображения<br><br><br><br><br><br></p>
</body>
</html>
В данном случае мы добавили тегу <p> изображение, которое не повторяется, и сместили его на 30px вправо и на 20px от верха. Вместо пикселей можно указать проценты. Получилось следующее:
Ну, вот мы и рассмотрели все свойства, используемые в CSS для работы с фоном. Теперь Вы можете применять их на практике при создании своих сайтов.
