• Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

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


CSS Справочник Полный CSS Справочник

Пример

Как позиционировать фоновое изображение:

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Попробуйте сами »

Определение и Использование

Свойство background-position устанавливает начальное положение фонового изображения.

Замечание: Чтобы это работало в Firefox и Opera, свойство background-attachment должно быть установлено в "fixed".

Значение по умолчанию: 0% 0%
Наследуется: нет
Версия: CSS1
JavaScript синтаксис: объект.style.backgroundPosition="center"


Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

Свойство background-position поддерживается всеми основными браузерами.

Замечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует объявление !DOCTYPE. IE9 поддерживает "inherit".


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

Значение Описание
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Если вы указываете только одно ключевое слово, другое значение принимается равным "center"
x% y% Первое значение - это горизонтальное положение и второе значение - это позиция по вертикали. Верхний левый угол - 0% 0%. Правый нижний угол - 100% 100%. Если вы укажите только одно значение, другое установится в 50%. Значение по умолчанию равно: 0% 0%
x y Первое значение указывает положение по горизонтали и второе - по вертикали. Левый верхний угол равен 0 0. Есдиницами измерения могут быть пикселы (0px 0px) или любые другие CSS единицы. Если вы укажите только одно значение, другое принимается равным 50%. Также можно комбинировать % и значения в различных единицах измерения
inherit Указывает, что настройка свойства background-position должна наследоваться от родительского элемента


Примеры

Попробуйте сами - Примеры

Как расположить фоновое изображение
Этот пример демонстрирует использование свойства background-image.

Как позиционировать изображение фона, используя %
Этот пример демонстрирует, как указать позицию изображения на странице, используя проценты.

Как расположить фоновое изображение, указывая значения в пикселах
Этот пример демонстрирует, как разместить изображение на странице, используя пикселы.


Смотрите Также

CSS уроки: CSS Фон

CSS справка: свойство background-image


CSS Справочник Полный CSS Справочник




© 2011 - 2022 Уроки CSS