Как выровнять фоновое изображение по центру css
Перейти к содержимому

Как выровнять фоновое изображение по центру css

  • автор:

Центрирование фонового изображения в div через CSS

Для расположения фонового изображения в центре элемента div используйте свойство CSS background-position: center; . Чтобы изображение правильно подстраивалось под размеры div, примените background-size: cover; .

Скопировать код

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

Менеджмент свойствами фонового изображения

Получить гармоничное расположение фонового изображения внутри div можно, зная и умея работать со следующими CSS свойствами:

  • background-position : Определяет положение изображения. center автоматически выровняет его и горизонтально, и вертикально.
  • background-size : Регулирует размер изображения. Значение cover обеспечивает заполнение всего div изображением, при этом его границы могут быть незначительно обрезаны.
  • background-repeat : Устанавливает правило повторения изображения. no-repeat делает фон статичным, без повторений внутри контейнера.

Использование этих свойств позволит вам добиться идеального баланса изображения для разных задач.

Царствующие сценарии центрирования

Фон на весь экран

Если замысел таков, что изображение должно полностью заполнить div:

background-position-x

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

Интерактивный пример

Значение этого свойства отменяется любой декларацией background или коротким свойством background-position применёнными после его объявления.

Синтаксис

/* Keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* values */ background-position-x: 25%; /* values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* Side-relative values */ background-position-x: right 3px; background-position-x: left 25%; /* Multiple values */ background-position-x: 0px, center; /* Global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset; 

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

Значения

Выравнивает левый край фонового изображения по левому краю фонового позиционирующего слоя.

Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.

Выравнивает правый край фонового изображения по правому краю фонового позиционирующего слоя.

Смещение левого вертикального края данного фонового изображения от левого вертикального края фонового слоя. (Некоторые браузеры позволяют назначать правый край для смещения).

Смещение горизонтальной позиции заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера, таким образом значение 50% горизонтально центрирует фоновое изображение.

Формальный синтаксис

background-position-x =
[ (en-US) center | (en-US) [ (en-US) [ (en-US) left | (en-US) right | (en-US) x-start | (en-US) x-end ] (en-US) ? (en-US) ? (en-US) ]! ] (en-US) # (en-US)

=
| (en-US)

Спецификации

Specification
CSS Backgrounds and Borders Module Level 4
# background-position-longhands
Начальное значение 0%
Применяется к все элементы. Это также применяется к ::first-letter и ::first-line .
Наследуется нет
Проценты относятся к ширине области позиционирования фона минус высота фонового изображения
Обработка значения Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
Animation type повторяющийся список из

Совместимость с браузерами

BCD tables only load in the browser

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

  • background-position
  • background-position-y (en-US)
  • background-position-inline
  • background-position-block
  • Использование множественных фонов (en-US)

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Расположение изображения по центру блока

Доброй ночи, интересует вопрос можно ли расположить изображение в блоке по центру? К примеру есть блок скажем 400х200 в нем изображение скажем 600х300 и оно располагается по дефолту top: 0; left: 0, если сделать изображению width: 100% оно займет всю ширину а по высоте обрежется, вот хочу уточнить можно ли как то средствами css расположить изображение по центру? Что то на подобие background-position: center center;

Отслеживать

задан 12 мая 2016 в 21:12

Constantine Shibaev Constantine Shibaev

857 2 2 золотых знака 18 18 серебряных знаков 35 35 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

.crop
Original size
.crop < width: 400px; height: 200px; position: relative; overflow: hidden; margin: 5px 0; >.crop img
 
Covered Image
Original size

Свойство background-position

Позиционирование фонового изображения используя ключевые слова. Первое значение — ось X, второе значение — ось Y. Возможные значения top, right, bottom, left, center.

  background-position: right 20px top 20px;

Позиционирование фонового изображения используя ключевые слова и значения (% или px). Значение определяет смещение фонового изображения относительно ключевого слова (top, right, bottom, left)

  

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *