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

Question

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

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

<div id="doit">

  Lorem Ipsum ...

</div>



//CSS

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

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

711 8

html css center image background

8 ответов:

Comments

Ничего не найдено.

Jake Lucas · Accepted Answer · 2011-02-18 12:39:11

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

250

2011-02-18 12:39:11

TimCodes.NET · Accepted Answer · 2012-12-25 18:41:18

попробовать background-position:center;

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

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

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

Capsule · Accepted Answer · 2011-02-18 12:36:44

использовать background-position:
background-position: 50% 50%;

Clayton Kirlew · Accepted Answer · 2015-04-25 03:25:27

Если ваше фоновое изображение представляет собой вертикально выровненный лист спрайта, вы можете горизонтально центрировать каждый спрайт следующим образом:
#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%;
}
Если ваш лист спрайта компактен или вы не пытаетесь центрировать фоновое изображение в одном из вышеупомянутых сценариев, эти решения не применяются.

Hemerson Varela · Accepted Answer · 2014-05-14 01:04:39

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

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}

Morteza Sadri · Accepted Answer · 2017-03-17 17:44:04

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

поддерживаемые значения"xvalue" и "yvalue" - это единицы длины, такие как px и процент и имена направлении как слева, справа и т. д.

"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 на здесь .

Collin Adams · Accepted Answer · 2016-12-07 22:19:46

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

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

Rodrigo Valenzuela · Accepted Answer · 2014-12-12 18:36:59

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

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>