Фон в CSS (Background)

Фон в CSS (Background) - 5.0 out of 5 based on 1 vote

Очень часто при верстке html страниц требуется задавать фон тому или иному элементу.

В данном уроке мы рассмотрим, каким образом можно задавать фон при помощи CSS.

Фон в CSS background - свойство для изменения фона

Должен отметить, что для создания фона в CSS имеется больше возможностей, чем у HTML, да и способы, с помощью которых можно задавать фон в html в принципе устарели.

Материалы по теме:

Для работы с фоном в CSS имеется несколько свойств. Разберем их по порядку.

background-color – задает цвет фона.

При помощи этого свойства, возможно, задавать цвет фона практически для любых элементов, будь то фон страницы, блока или текста. Цвет фона задается следующим образом: background-color:#CCFFCC; где #CCFFCC – это значение цвета. Для того чтобы посмотреть как это работает, создайте html страничку содержащую следующий код:

 <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) фону текста.

f1

background-image – задает фоновый рисунок.

При помощи данного свойства задавать фоновый рисунок можно практически для любого объекта. Задается следующим образом background-image:url('fon.gif'); где url('fon.gif') это путь к изображению, если ваше изображение лежит в той же папке что и сама html страничка то путь будет выглядеть как и в этом случае, если же изображение, например, лежит в папке images то путь к изображению будет выглядеть так: url('images/fon.gif').

Можете попробовать сохранить это маленькое изображение в скобках ( fon ), в ту папку, где лежит ваша страничка (для этого кликните по нему правой кнопкой мыши и выберите пункт “Сохранить изображение”), а в саму страничку вставить следующий код:

<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>

В результате у вас должен получиться следующий фон:

f2

background-repeat – определяет будет ли повторяться фоновое изображение и если будет то каким образом. У этого свойства существуют следующие значения:

repeat – изображение будет повторяться как по вертикали, так и по горизонтали;
repeat-x – изображение будет повторяться только по горизонтали;
repeat-y – изображение будет повторяться только по вертикали;
no-repeat – изображение не будет повторяться.

Например создадим фон который будет повторяться только по вертикали, для этого в наш код необходимо добавить следующее background-repeat: repeat-y, полностью он будет выглядеть так:

<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>

f3В результате наш фон будет отображаться так:

background-attachment – определяет будет ли фон перемещаться вместе с содержимым страницы при скроллинге или нет. Имеет следующие значения:

fixed – фон будет оставаться на месте, а содержимое страницы будет перемещаться;

scroll – фон будет перемещаться вместе с другим содержимым страницы;

Задается это свойство так background-attachment: fixed; весь код:

<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 – дает возможность позиционировать фоновое изображение. При помощи данного свойства можно смещать изображение относительно левого верхнего угла элемента.

tОно имеет два значения: первое, на сколько ваше фоновое изображение будет смещаться от левого края и второе на сколько оно будет смещаться от верха. Для того чтобы посмотреть как это работает сохраните изображение, которое Вы видите слева, в ту папку, где находится ваша html страница, а в саму страницу вставьте следующий код:

<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 от верха. Вместо пикселей можно указать проценты. Получилось следующее:

f4

Ну, вот мы и рассмотрели все свойства, используемые в CSS для работы с фоном. Теперь Вы можете применять их на практике при создании своих сайтов.

Материал подготовлен проектом: webmastermix.ru

Рекомендуем ознакомиться:
1 1 1 1 1 1 1 1 1 1 Рейтинг 5.00 (1 Голос)
Подробности
Опубликовано: 13 Январь 2010
Обновлено: 04 Сентябрь 2013
Просмотров: 29290