Position css background image: CSS background-position property

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

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

Синтаксис:

 background-position: value; 

Примечание: Фоновое изображение по умолчанию размещается в верхнем левом углу элемента с повторением как по горизонтали, так и по вертикали.

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

background-position: слева вверху; : Это свойство используется для установки изображения в левом верхнем углу.

Пример: Этот пример иллюстрирует использование свойства background-position , где значение позиции устанавливается слева вверху.

HTML

< html <

0038 голова >      < заголовок > CSS | Собственность фоновой позиции Название > < Стиль > - . background-repeat: без повтора          background-attachment: исправлено;          background-position: слева вверху;      }      style > head >      < body > корпус > HTML >

Выход:

Фоночная поставка: левый центр; : Это свойство используется для установки изображения в левом центре.

Пример: Этот пример иллюстрирует использование свойства background-position , где значение позиции устанавливается влево по центру.

HTML

< html > < head >      < title > CSS | Собственность фоновой позиции Титул > < Стиль > Body { Body { { . 0038 Справочный Image: URL ( Фоны-повторный закрой: без повторного закуска; Фоны: фиксированный; ; } Стиль > .0037 < body > body > html >

Output:

background- положение: слева внизу; : Это свойство используется для установки изображения в левом нижнем углу.

Пример: Этот пример иллюстрирует использование свойства background-position , где значением position является левое нижнее положение.

HTML

< html > < head >      < title > CSS | background-position Свойство title >      < style >  0038 Body { Справочный Image: URL ( Фоны-повтор: no-repee; позиция: левая нижняя;0038 head > < body > body > html >

Output :

background-position: по центру вверху; : Это свойство используется для установки изображения в центральную верхнюю позицию.

Пример: Этот пример иллюстрирует использование свойство background-position , где значение позиции установлено в центральную верхнюю позицию.

HTML

0037      style >

head >

< body >

body >

html >

< html > < head >      < title > CSS | Свойство background-position title > < Стиль > Тело { Фанал. background-attachment: фиксированный;          background-position: center top;      }

Вывод:

background-position: center center; : Это свойство используется для установки изображения в центральное центральное положение.

Пример: Этот пример иллюстрирует использование свойства background-position , где значением position установлено значение center center position.

HTML

< html > < head >      < title > CSS | Свойство background-position Титул > < Стиль > ФОНА { . -повтор;          background-attachment: фиксированный;          background-position: center center;      }      style > head > < body > Body > HTML >

Выход:

. : Это свойство используется для установки изображения в центральное нижнее положение.

Пример: Этот пример иллюстрирует использование свойства background-position , где значение позиции устанавливается в центральную нижнюю позицию.

HTML

< html > < head >      < title > CSS | Собственность фоновой позиции Название > < Стиль > . background-repeat: без повтора;          background-attachment: исправлено;          background-position: по центру снизу;      }      style > head > < body > корпус > html >

Вывод:

background-position: справа вверху; : Это свойство используется для установки изображения в правильное верхнее положение.

Пример: Этот пример иллюстрирует использование свойства background-position , где значение позиции устанавливается в правую верхнюю позицию.

HTML

< html > < head >      > CSS < title | Собственность фоновой позиции Название > < Стиль > BODITY { .0038 background-repeat: без повтора;          background-attachment: исправлено;          background-position: справа вверху;      }      style > head > < body > Body > HTML >

Выход:

: Это свойство используется для установки изображения в правом центральном положении.

Пример: Этот пример иллюстрирует использование свойства background-position , где значением position установлено правое центральное положение.

HTML

< html > < head >      < title > CSS | background-position Свойство title >      < style >  0038 Body { Справочный Image: URL ( Фоны-повтор: no-repee; положение: справа по центру;      }      стиль 7 38 head > < body > body > html >

Output :

background-position: справа внизу; : Это свойство используется для установки изображения в правом нижнем положении.

Пример: Этот пример иллюстрирует использование свойство background-position , в котором значение позиции устанавливается в правую нижнюю позицию.

HTML

0037      style >

head >

< body >

body >

html >

< html > < head >      < title > CSS | Свойство background-position title > < Стиль > Тело { Фанал. background-attachment: фиксированный;          background-position: справа внизу;      }

Вывод:

background-position: 25% 75%; : Это свойство используется для установки изображения на 25% слева и 75% сверху.

Примечание: Для обозначения x%y% здесь x% обозначает положение по горизонтали, а y% обозначает положение по вертикали относительно исходного положения, т. е. слева вверху.

Пример: Этот пример иллюстрирует использование свойства background-position , где значение позиции задается в виде процента.

HTML

< html > < голова >      < title > CSS | Собственность фоновой позиции Название > < Стиль > - . background-repeat: без повтора;          background-attachment: исправлено;          background-position: 25% 75&;      }      style > head > < body > корпус > HTML >

Выход:

Фона. : Это свойство используется для установки изображения на расстоянии 30 пикселей слева и 80 пикселей сверху.

Примечание : Для обозначения x-pos y-pos здесь единицы представлены в пикселях или любых других единицах CSS.

Пример: Этот пример иллюстрирует использование background-position , где значение позиции задается в виде пикселей.

HTML

< html > < head >      < title > CSS | background-position Свойство title >      < Стиль > Тело { ФОНАР-IMAGE: URL: NO-RE-REPAT: NO-REPAT; Исправлена; Фоновая позиция: 30px 80px; } 0037 style > head > < body > body > html >

Вывод:

Поддерживаемые браузеры: Ниже перечислены браузеры, поддерживаемые свойством background-position 90:004 9. 0005

• Google Chrome 1.0
• Internet Explorer 4.0
• Microsoft Edge 12.0
• Firefox 1.0
• Opera 3.5
• Safari 1.0 9168

  9 9168

• . ❮ Пред. Следующий ❯

  Свойство background-position-x устанавливает горизонтальное положение для каждого фона. Можно указать одно или несколько значений, разделенных запятыми.

  По умолчанию фоновое изображение располагается в верхнем левом углу элемента и повторяется как по горизонтали, так и по вертикали.

  Допустимы отрицательные значения.

   background-position-x: слева | центр | право | длина | процент | начальная | наследовать; 

  Пример свойства background-position-x:

   
  
    <голова>
      
      <стиль>
        тело {
          background: #ccc url("/build/images/w3docs-logo-black.png") Repeat-y;
          фоновая позиция-х: 70%;
        }
      
    
    <тело>
       
  Пример свойства Background-position-x
   
    
   

  Попробуй сам "

  Результат

  Пример свойства background-position-x со значением "center":

    <голова> <стиль> тело {
   background: #ccc url("/build/images/w3docs-logo-black.