Position css image background: background-position — CSS: Cascading Style Sheets — Вебджем.рф

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

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

Синтаксис:

 background-position: value;

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

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

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

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

HTML

< html <

0038

голова >

< заголовок > CSS | background-position Property title >

< style >

body {

background-image: url(

background-repeat: без повтора

background-attachment: исправлено;

background-position: слева вверху;

}

style >

head >

< body >

корпус >

HTML >

Выход:

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

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

HTML

< html >

< head >

< title > CSS | Собственность фоновой позиции Титул >

< Стиль >

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 >

< style >

body {

background-image: url(

background-repeat: no-repeat;

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-position Property title >

< style >

body {

background-image: url(

background-repeat: без повтора;

background-attachment: исправлено;

background-position: по центру снизу;

}

style >

head >

< body >

корпус >

html >

Вывод:

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

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

`HTML`

< html >

< head >

> CSS < title | background-position Property title >

< style >

body {

background-image: url(

background-repeat: без повтора;

background-attachment: исправлено;

background-position: справа вверху;

}

style >

head >

< body >

Body >

HTML >

Выход:

 9000 3
 9000. : Посредник 
: правый.  : Это свойство используется для установки изображения в правом центральном положении.
  Пример:  Этот пример иллюстрирует использование свойства  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   > 
    <  Стиль  > 
    Тело {
    ПРИНЕСКАЯ ПРИМЕНЕНИЯ: URL (
 8 .  background-attachment: фиксированный; 
             background-position: справа внизу; 
         } 
 
  Вывод: 
  background-position: 25% 75%;  : Это свойство используется для установки изображения на 25% слева и 75% сверху.
  Примечание:  Для обозначения x%y% здесь x% обозначает положение по горизонтали, а y% обозначает положение по вертикали относительно исходного положения, т. е. слева вверху.
  Пример:  Этот пример иллюстрирует использование свойства  background-position , где значение позиции задается в виде процента.
 HTML 
   
  <   html   > 
  <   голова   > 
         <   title   > CSS | background-position Property   title   > 
         <   style   > 
         body { 
             background-image: url( 
             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 (
   : AURL-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
 9106 Изображения by aliceyt Coding 
 Используйте background-position для настройки положения изображения 
 Я хотел бы поделиться с вами тем, как позиционировать фоновое изображение (вместо того, чтобы оставлять его положение браузеру, где он будет обрезать изображение в направление справа и снизу по умолчанию).
 Для этой работы я использую пейзаж с мужчиной на переднем плане в качестве фокуса. Изображение добавляется как   background-image   со свойством CSS   background-size: cover    .  Таким образом, он будет изменен по размеру, чтобы покрыть весь контейнер.
 В зависимости от размера контейнера изображение будет растянуто или обрезано.
 Я буду использовать фотографию ниже, чтобы показать, как расположить фоновое изображение на веб-странице. Цель состоит в том, чтобы изображение покрывало всю веб-страницу, будь то на мобильном или настольном компьютере.
 Фото Rémi Jacquaint на Unsplash Изображение выше отлично смотрится на большом ноутбуке. Оно выглядит немного растянутым, когда я сравниваю исходное изображение с тем, как оно отображается в браузере (как показано ниже).
 На маленьком ноутбуке, хотя изображение обрезано справа, человек на снимке все равно виден. Однако на мобильном он полностью обрезан — не то, что задумал дизайнер.
 Изображение на маленьком ноутбуке по сравнению с тем же изображением на большом мобильном телефоне Как расположить изображение так, чтобы человек на нем оставался в центре внимания?
 Быстрым решением будет обрезать изображения с помощью редактора изображений, а затем отобразить правильное изображение в зависимости от размера экрана.
 Другим способом было бы использование CSS — это то, что я использую здесь.
 Некоторые сведения об использовании позиции 
  Позиция  сообщает браузеру, как разместить изображение внутри контейнера относительно краев его контейнера.
 Значения для позиции   могут быть выражены как ключевые слова (  верхняя  ,  нижняя  ,  слева  ,  справа  ,  по центру  ), процент или длина.
 Значение по умолчанию  background-position  равно  top left  или  0% 0%  .
 Если указано только одно значение, в зависимости от значения я могу указать положение либо по горизонтали, либо по вертикали. Затем устанавливается другое положение  по центру  .
 Если используются два значения, не являющиеся ключевыми словами, первое значение представляет положение по горизонтали, а второе — положение по вертикали.
 Если используются три или четыре значения, значения длины в процентах будут служить смещениями для предшествующих значений ключевого слова.
 Я добавляю файл изображения, используя свойство  background-image  в элементе 
 .
 Глядя на код HTML, контейнер 
  (который является моим файлом изображения) — это   .
 Использование ключевых слов для значения 
 Чтобы изменить положение изображения, я добавляю  background-position  свойство и добавьте  center  ,  top  ,  bottom  ,  left  и  right  в качестве значений. Ниже приведены скриншоты того, как меняется положение изображения при применении разных значений:
 В этом случае, когда мое изображение отображается в полный рост (или близко к нему), центрирование изображения по оси Y не имеет никакого эффекта. Следовательно, когда я использую background-position: center, background-position: top и background-position: bottom, я эффективно использую  background-position: центр по центру. 
  слева 
  Ось X:  Изображение расположено напротив левого края контейнера, и кадрирование начинается с  справа  .
  Ось Y:  Изображение центрировано.
  справа 
  Ось X:  Изображение расположено напротив правого края контейнера, и кадрирование начинается с  справа  .
  Ось Y:  Изображение центрировано.
  верх 
  Ось X:  Изображение центрировано.
  Ось Y:  Изображение расположено напротив верхнего края контейнера, а кадрирование начинается с  нижнего края  .
  снизу 
  Ось X:  Изображение центрировано.
  Ось Y:  Изображение расположено напротив нижнего края контейнера, и кадрирование начинается с  верхнего края  .
  центр 
  Ось X:  Изображение центрировано.
  Ось Y:  Изображение центрировано.
 Использование неключевых слов для 
 value Помимо использования ключевых слов, таких как  center  ,  top  ,  bottom  ,  left  и  right  в качестве значений, я могу использовать другие единицы измерения CSS для более точных или процентных значений.