Цвет и фон в CSS — окончание

Цвет и фон в CSS Продолжим изучение свойств таблиц стилей CSS, начатое в прошлом посте Цвет и фон в CSS.
Рассмотрим возможность использовать изображение в качестве фона веб-элемента. Такую возможность нам даёт свойство background-image. Порядок назначения параметров следующий:
веб-элемент { название свойства(background-image): адрес изображения(url) или отмена ранее заданного значения(none); }.
Возьмём такой пример использования изображения в качестве фона веб-страницы:

<html>
<head>
<title>background-image</title>
<style>
Body{
background-image: url ('bg.gif');
}
DIV {
background-image: url ('bg1.gif');
}
</style>
</head>
<body>
<div>Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста</div>
</body>
</html>

свойство CSS background-image

На рисунке показано применение двух изображений замещающих фон. Фоном всей веб-страницы служит рисунок с извесным медвежонком. А вот фоном блока DIV, служит голубой квадратик размером 5*5 пикселов.

Веб-мастера часто применяют к одному элементу сразу два свойства CSS background-image и background-color. Это делается в различных случаях, когда необходимо подстраховаться от долгой загрузки фонового изображения, или при использовании изображения с прозрачным фоном,а также при резиновой вёрстке при замещения пустых пространств в шапке сайта, возникающих о окне браузера с большим разрешением.

Свойство CSS background-repeat
Иногда возникает  необходимость растиражировать изображение лишь в одну сторону — по осям Х, или Y. в достижении этой задачи нам поможет свойство стилей background-repeat. Стоит только а значениях указать нужную ось тиражирования рисунка.

  • repeat — Фоновый  рисунок повторяется и по горизонтали, и вертикали.
  • repeat-x — Фоновое изображение повторяется лишь по горизонтали.
  • repeat-y — Фоновое изображение повторяется лишь по вертикали.
  • no-repeat — Определяет только одно фоновое изображение в веб-элементе, и без повторений. Надо помнить, что положение рисунка задаётся CSS свойством background-position, которое определяет месторасположение рисунка по умолчанию в левом верхнем углу родительского элемента.

Посмотрим на примере:

<html>
<head>
<title>background-repeat</title>
<style>
BODY {
background-image: url ('bg2.gif');
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Изображение размножается по оси Х.</p>
</body>
</html>

свойство CSS background-repeat

В качестве фонового изображения использован рисунок размером 20*100 пикселов. По умолчанию изображение прижато к верхнему левому углу и тиражируется вправо по оси Х.

Свойство стилей CSS background-position
Свойство background-position позволяет задать начальное положение фонового изображения.
Для определения положения фонового изображения есть два параметра: расположение по горизонтали и вертикали. Описание положений взято с сайта Влада Мержевича, просто сам точнее не напишу. И так:

top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)

Координаты можно задавать по разному: единицами длины, ключевыми словами и процентами. С единицами длины просто. А соотношение ключевых слов и процентов, им соответствующих, наглядно описано в списках выше. Ну и пример:

<html>
<head>
<title>background-position</title>
<style>
BODY {
background-image: url ('bg.gif');
background-position: 50px 20px;
background-repeat: no-repeat;
}
DIV {
height: 200px;
width: 400px;
position: absolute;
top: 130px;
background-color: #F9D411;
background-image: url ('bg.gif');
background-position: 100% 50%;
background-repeat: no-repeat;
}
</style>
</head>

<body>
<div></div>
</body>
</html>

свойство CSS background-position

Как видно из рисунка верхняя картинка отстаёт от левого края на 50px, а от верха — на 20px.
А вот второй рисунок, помещённый для наглядности в блок DIV, прижат к правому краю(100%), и расположен посередине вертикали(50%). Все незнакомые Вам свойства блока DIV будут рассмотрены позднее.

Свойство background
С помощью данного универсального CSS свойства background можно задать сразу несколько стилевых параметров фона и цвета. При перечислении значений, они пишутся через пробел. Ни одно из значений обязательным не является.Поэтому любое из них, или все сразу могут быть опущены.

Для примера, возьмем картинку с мишкой и применим к ней свойство background:

<html>
<head>
<title>background</title>
<style>
BODY {
background: url ('bg.gif') no-repeat 100px 100px #F9D411;
}
</style>
</head>
<body>

</body>
</html>

свойство CSS background

Думаю, рисунок наглядно дополняет код. На этом заканчиваем изучать цвет и фон в CSS.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha