Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
background-position

Значения свойства:

Проценты (% %) Пара 0% 0% задаёт исходное значение фонового изображения, первое из них устанавливает смещение вправо для фонового изображение относительно верхнего левого угла элемента, которое использует данное фоновое изображение в качестве фона, а второе значение устанавливает смещение вниз при тех же условиях, что и для первого. К примеру, значение 100% 100% смещает правый нижний угол фонового изображения с правым нижним углом элемента.
length в качестве значения допускаются любые единицы измерения, например 2cm 2cm означает смещение левого угла фонового изображения вправо и вниз на 2 см.
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%'.

Правило. Первое значение этого свойства отвечает за горизонтальное выравнивание, второе за вертикальное. Допускается комбинировать разные типы значений свойства background-position, за исключением ключевых слов и процентов.

Дополнительный пример:

  1.BODY { background: url("banner.jpeg") right top } /* 100% 0% */
  2.BODY { background: url("banner.jpeg") top center } /* 50% 0% */
  3.BODY { background: url("banner.jpeg") center } /* 50% 50% */
  4.BODY { background: url("banner.jpeg") bottom } /* 50% 100% */
  5.

Если фоновое изображение зафиксировано с помощью свойства background-attachment, то перемещаться с помощью свойства background-position оно будет относительно вьюпорта.

  1.BODY {
  2. background-image: url("logo.png");
  3. background-attachment: fixed;
  4. background-position: 100% 100%;
  5. background-repeat: no-repeat;
  6.}
  7.


Доступ и установка с jQuery

  • Получить свойство backgroundPosition: val = $("div").css("backgroundPosition");
  • Установить свойство backgroundPosition: $("div").css({"backgroundPosition":"..."});
  • Установить свойство backgroundPosition: $("div").css("backgroundPosition","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org