background-position | Свойство фона - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Главная » Справочник CSS3 » Свойства фона


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


background-position | Свойство фона

Свойство background-position устанавливает начальную позицию фона




Свойство background-position задаёт начальную позицию фонового изображения,относительно элемента для которого указан.Основных значения для положения фона есть два,это горизонтальная и вертикальная плоскостя,а координатами могут быть,текстовые координаты,значения в процентах или других числовых измерениях.Свойство применимо ко всем элементам,создано в версии CSS1 но проходит валидацию согласно версии CSS3.




Дополнительные значения свойства background-position


Значение
Описание
<процент><процент>Задает расположение фоновой картинки в процентных значениях,первое значение - значение по оси X (горизонтальное значение), второе - оси Y (вертикальное). Значение 0% 0% соответствует левому верхнему углу, 100% 100% - правому, нижнему
<процент>Задает расположение фоновой картинки в процентных значениях по горизонтальной оси,вертикальное значение будет равно 50%
<число><число>Задает расположение фоновой картинки в единицах измерения (например, в px - пикселях). Первое значение - значение по оси X (горизонтальное значение), второе - оси Y (вертикальное)
<число>Задает расположение фоновой картинки в единицах измерения по горизонтальной оси. Вертикальное значение будет равно 50%
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%Фоновое изображение начинается в правом нижнем углу
inheritНаследует значение от родителя

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство background-position</title>
<style type="text/css">
<!--
body {
background-image: url('http://delaisait.ucoz.ru/css/demo/img/css3_background-repeat.jpg');
background-position: center;
background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
<center>
<p>Положение рисунка по центру</p>
</center>
<br>
</body>
</html>

Пример в действии



Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-background/#the-background-position
Категория: Свойства фона | Добавил: IZOTOP (30.03.2012) | Автор: Меренков Михаил E W
Просмотров: 592 | Теги: css, свойство, background-position, style, фона | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]