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

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

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

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

Возможно ли это?

+109
18 февр. '11 в 10:35
источник поделиться
8 ответов
#doit {
    background: url(url) no-repeat center;
}
+232
18 февр. '11 в 10:39
источник

попробуйте background-position:center;

EDIT: поскольку этот вопрос получает много просмотров, его стоит добавить дополнительную информацию:

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

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

+67
18 февр. '11 в 10:36
источник

Используйте background-position:

background-position: 50% 50%;
+14
18 февр. '11 в 10:36
источник

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

#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%;
}

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

+7
25 апр. '15 в 0:25
источник

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

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}  
+5
13 мая '14 в 22:04
источник

Для центра или размещения фонового изображения вы должны использовать свойство background-position. Свойство 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 в здесь.

+3
17 мар. '17 в 15:44
источник

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

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}
+2
07 дек. '16 в 20:19
источник

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

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>        
+1
12 дек. '14 в 16:18
источник

Посмотрите другие вопросы по меткам или Задайте вопрос