CSS: Урок 10. Позиционируем изображение-фон при помощи CSS

Четверг, 16 Декабря 2010 г. 16:52 + в цитатник

CSS атрибуты, определяющие изображение-фон и его позицию

Изображение-фон в CSS | Пример позиционирования изображения-фона

Изображение-фон в CSS | Фон и фоновое изображение для блока

Пример CSS позиционирования изображения-фона:

                                  <head>

            

            <title>Пример</title>

            

            <style type="text/css">

            

            body {

            

            background-image:url(./images/cvetok.png);

            

            background-repeat:no-repeat;

            

            background-position:center 80px

            

            }

            

            </style>

            

                              </head>

            

            <body>

            

            <p>Даже при изменении размеров окна,

            

            фоновое изображение все равно останется в центре.</p>

            

            </body>

background-position определяет горизонтальное (1-е значение) и вертикальное (2-е значение) позиционирование изображения-фона. В результате позиционирования изображение-фон будет установлено по центру страницы, по горизонтали и на расстоянии 80px сверху по вертикали. Значения атрибута background-position могут быть определены в пикселях, в процентах или терминами: left, right, center, bottom, top.

Результат: позиционируем изображение-фон при помощи CSS

Изображение-фон изменяет свою позицию относительно границ элемента, внутри которого оно находится, то есть это могут быть границы окна web-браузера, границы ячейки таблицы или блока <div> </div>.

CSS | Фон и фоновое изображение для блока

Пример:

                                  <head>

            

            <title>Пример</title>

            

            <style type="text/css">

            

            body {

            

            background-color:#66cc66

            

            }

            

            #name {

            

            margin:0 auto;

            

            width:550px;

            

            height:300px;

            

            padding:30px;

            

            border:3px solid #ffff00;

            

            background-color:#ffdd00;

            

            background-image:url(./images/cvetok2.png);

            

            background-repeat:no-repeat;

            

            background-position:100px 100px;

            

            color:#ffffff

            

            }

            

            </style>

            

                              </head>

            

            <body>

            

            <div id="name">Текст  описуемого блока</div>

            

            </body>

Атрибуты и значения

margin – определяет внешние отступы.

margin:0 auto – определяет центрирование блока по горизонтали.

padding – определяет поля внутри блока.

border – определяет свойства границ.

width – определяет ширину в пикселях или в процентах.

height – определяет высоту.

color – определяет цвет текста.

Что касается механизма позиционирования, то его можно описать так: верхний левый угол блока является началом воображаемой системы координат (0). Верхняя и левая границы соответственно оси x и y. 100 пикселей по горизонтали и 100 пикселей по вертикали определяют координату верхнего левого угла изображения-фона. Вот и все...

Aтрибуты margin, padding, border, width, height подробно рассматриваются в следующих уроках.

Результат: фон и фоновое изображение для блока на примере CSS атрибутов

Блоки <div> </div>, манипулируемые CSS, способны на многое. Они активно используются при верстке, учавствуют в дизайнерском оформлении web-страниц.

Код из верхнего примера можно напечатать более коротко:

                                  <head>

            

            <title>Пример</title>

            

            <style type="text/css">

            

            body {

            

            background-color:#66cc66

            

            }

            

            #name {

            

            margin:0 auto;

            

            width:550px;

            

            height:300px;

            

            padding:30px;

            

            border:3px solid #ffff00;

            

            background:#ffdd00 url(./images/cvetok2.png) no-repeat 100px 100px;

            

            color:#ffffff

            

            }

            

            </style>

            

                              </head>

            

            <body>

            

            <div id="name">Текст  описуемого блока</div>

            

            </body>

Результат будет аналогичен предыдущему: фон и фоновое изображение для блока

background объединяет в себе все свойства фона. Очередность записи значений следующая:

background-color

background-image

background-repeat

background-attachment

background-position

Не обязательно использовать все значения background, но последовательность должна быть учтена. В примере выше отсутствует атрибут background-attachment, который подробно рассмотрен в следующем уроке.

ab-w.net

Рубрики:

Полезное
Уроки CSS