Як центрувати (фонове) зображення в розділі?

Чи можна централізувати фонове зображення у діві? Я спробував майже все - але успіху не було:

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

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

Чи можливо це?

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

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

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

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

background-position:centerце стенограма для background-position: center center; ( background-position: horizontal vertical);

Використовуйте позицію фону:

background-position: 50% 50%;

Для центру або розміщення фонового зображення слід використовувати background-positionвластивість. Властивість background-position встановлює вихідне положення фонового зображення з боків елемента topі leftз нього. Синтаксис CSS є background-position : xvalue yvalue;.

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

"Xvalue" - це горизонтальне положення фону і починається зверху елемента. Це означає, що якщо ви 50pxйого використовуєте, він буде розташований на відстані "50 пікселів" від верхньої частини елементів. І "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в тут .

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

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

Якщо аркуш спрайта є компактним або ви не намагаєтесь зосереджувати фонове зображення в одному з вищезгаданих сценаріїв, ці рішення не застосовуються.

Це працює для мене:

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

Це працює для мене:

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

Це працює для мене:

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

Це працює для мене для вирівнювання зображення до центру поділу.

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