Как центрировать (фоновое) изображение внутри div?


136

Можно ли центрировать фоновое изображение в div? Я попробовал почти все - но безуспешно:

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

Это возможно?

Ответы:


279
#doit {
    background: url(url) no-repeat center;
}

25
Спасибо. Конкретный CSS для центрирования - это "background-position: center;"
Пмонт

@Green: см. Мой ответ для фоновых изображений спрайта.
Клэйтон,

3
Если вы хотите, чтобы весь div был заполнен изображением и не было лишнего пространства, вы должны использовать background-size: cover; Если вы хотите, чтобы все изображение отображалось без какой-либо части изображения, которое вы хотите обрезать или растянутьbackground-size: contain;
Zlerp

80

пытаться background-position:center;

РЕДАКТИРОВАТЬ: так как этот вопрос получает много просмотров, стоит добавить дополнительную информацию:

text-align: center не будет работать, потому что фоновое изображение не является частью документа и, следовательно, не является частью потока.

background-position:centerявляется сокращением для background-position: center center; ( background-position: horizontal vertical);


на самом деле вам просто нужноbackground-position:center;
Дейв Саг

Выбранный ответ приводит к тому, что весь фон исчезает по какой-то причине (если честно, я делаю некоторые jquery вещи, которые могут быть причиной этого?), Но этот ответ работает. Upvote.
bwoogie

15

Использовать background-position:

background-position: 50% 50%;

1
полезно, если вам нужно изображение по центру, но сверху по вертикали: background-position: 50% 0%;
Себастьян Гикель

50% 0 короче ;-) В CSS вам никогда не понадобятся какие-либо единицы, если значение равно 0
Capsule

8

Для центра или позиционирования фонового изображения вы должны использовать background-positionсвойство. Свойство фон положения задает начальное положение фонового изображения с topи leftстороны элемента. Синтаксис CSS есть background-position : xvalue yvalue;.

Поддерживаемые значения «xvalue» и «yvalue» - это единицы измерения длины, например, pxпроцентное соотношение и названия направлений, такие как left, right и т. д.

«Xvalue» - горизонтальное положение фона, начинающееся сверху элемента. Это означает, что если вы используете 50pxего, будет "50px" от верхней части элементов. И "yvalue" - это вертикальная позиция, которая имеет такое же состояние.

Так что если вы используете background-position: center;ваш фоновый рисунок будет по центру.

Но я всегда использую этот код:

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

Я знаю, что это так запутанно, но это значит:

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

И я знаю, что это тоже background-sizeновое свойство, и в сжатом коде /coverэти коды означают изменение fillразмера фона и позиционирование в фоновом режиме рабочего стола Windows.

Вы можете посмотреть более подробную информацию о background-positionв здесь и background-sizeв здесь .


7

Если ваше фоновое изображение представляет собой вертикально спрайтовый лист, вы можете горизонтально центрировать каждый спрайт следующим образом:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

Если ваше фоновое изображение представляет собой горизонтально спрайтовый лист, вы можете вертикально центрировать каждый спрайт следующим образом:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

Если ваш спрайт-лист компактен или вы не пытаетесь центрировать фоновое изображение в одном из вышеупомянутых сценариев, эти решения не применяются.



3

Это работает для меня:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

1
margin: 0 auto;где autoделает его центром по центру внутри div. Спасибо!
oyalhi


0

Это работает для меня для выравнивания изображения по центру div.

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.