Background center image: CSS background-position property

Стиль HTML DOM backgroundPosition Свойство

❮ Предыдущий ❮ Справочник по объектам стиля Далее ❯

Пример

Изменить положение фонового изображения:

document.body.style.backgroundPosition = «справа вверху»;

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

Другие примеры «Попробуйте сами» ниже.

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

Свойство backgroundPosition устанавливает или возвращает положение фонового изображения внутри элемента.

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Синтаксис

Вернуть свойство backgroundPosition:

объект . style.backgroundPosition

Установить свойство backgroundPosition:

объект .style.backgroundPosition = значение

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

4 Описание вверху слева
вверху по центру
вверху справа
по центру слева
по центру по центру
по центру справа
внизу слева
внизу по центру
внизу справа Если указать только одно ключевое слово, другим значением будет «центр».

Технические детали

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

Пример

Изменить положение фонового изображения в элементе

по центру снизу:

document.getElementById(«myDiv»).style.backgroundPosition = «center bottom»;

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

Пример

Измените положение фонового изображения в элементе

на 200 пикселей по горизонтали и 40 пикселей вертикальный:

document.

getElementById(«myDiv»).style.backgroundPosition = «200px 40px»;

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

Пример

Вернуть позицию фонового изображения в элементе

:

document.getElementById(«myDiv»).style.backgroundPosition;

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

---

Связанные страницы

Учебник CSS: Фон CSS

Ссылка CSS: свойство background-image

Справочник CSS: свойство background-position

Ссылка HTML DOM: свойство фона

❮ Назад ❮ Справочник по объектам стиля Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

---

---

---

Top Tutorials

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

9 Top7 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Как центрировать фоновое изображение внутри элемента Div

В этом фрагменте вы узнаете, как центрировать фоновое изображение внутри элемента

. Конечно, вам нужны свойства CSS. В частности, это можно сделать с помощью свойств background и background-size. Ниже вы можете увидеть, как эти свойства используются для достижения нашей цели.

В приведенном ниже примере мы используем элемент

и присваиваем ему атрибут класса, а затем стилизуем класс в разделе CSS. Вам нужно указать положение изображения через значение «центр» сокращенного свойства фона. Установите ширину изображения на «100%». В этом примере мы также указываем высоту и размер фона нашего изображения.

Пример центрирования фонового изображения в

со свойством background:

 

 <голова>
   
   <стиль>
     . bg-изображение {
       ширина: 100%;
       высота: 200 пикселей;
       фон: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") центр без повторов;
       размер фона: 250 пикселей;
     }
   
 
 <тело>
   <дел>
 
 

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

Результат

Если вы хотите центрировать фоновое изображение внутри элемента

и отображать все изображение без обрезки или растяжения какой-либо его части, попробуйте следующий пример, в котором мы устанавливаем для свойства background-size значение » содержать» значение.

Пример центрирования фонового изображения со значением «contain» свойства background-size:

  

  <голова>
    
    <стиль>
      .bg-изображение {
        высота: 400 пикселей;
        фон: URL("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"), центр без повторов;
        размер фона: содержит;
      }
    
  
  <тело>
    <дел>
  
 

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

Наш последний пример демонстрирует, как можно заполнить весь элемент

фоновым изображением и не оставить лишнего места.

No related posts.