Como centralizar uma imagem (em segundo plano) dentro de uma div?

É possível centralizar uma imagem de fundo em uma div? Eu tentei quase tudo - mas sem sucesso:

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

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

Isso é possível?

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

experimentar background-position:center;

EDIT: como esta pergunta está recebendo muitas visualizações, vale a pena adicionar algumas informações extras:

text-align: center não funcionará porque a imagem de plano de fundo não faz parte do documento e, portanto, não faz parte do fluxo.

background-position:centeré uma abreviação de background-position: center center; ( background-position: horizontal vertical);

Use a posição de fundo:

background-position: 50% 50%;

Para centralizar ou posicionar a imagem de fundo, você deve usar a background-positionpropriedade A propriedade background-position define a posição inicial de uma imagem de plano de fundo tope os leftlados do elemento. A sintaxe CSS é background-position : xvalue yvalue;.

Os valores suportados "xvalue" e "yvalue" são unidades de comprimento como pxe nomes de porcentagem e direção como esquerda, direita e etc.

O "xvalue" é a posição horizontal do plano de fundo e começa na parte superior do elemento. Isso significa que, se você usá- 50pxlo, estará "50px" longe da parte superior dos elementos. E "yvalue" é a posição vertical que tem a mesma condição.

Portanto, se você usar background-position: center;sua imagem de fundo, será centralizada.

Mas eu sempre uso este código:

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

Eu sei que é tão confuso, mas significa:

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

E eu sei que também background-sizeé uma propriedade nova e, no código compactado, o que é isso, /covermas esses códigos significam o filldimensionamento e o posicionamento em segundo plano no plano de fundo da área de trabalho do Windows.

Você pode ver mais detalhes sobre background-positionem aqui e background-sizeem aqui .

Se sua imagem de plano de fundo for uma folha de sprite alinhada verticalmente, você poderá centralizar horizontalmente cada sprite da seguinte maneira:

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

Se sua imagem de plano de fundo for uma folha de sprite alinhada horizontalmente, você poderá centralizar verticalmente cada sprite da seguinte maneira:

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

Se sua planilha de sprite é compacta ou você não está tentando centralizar sua imagem de plano de fundo em um dos cenários mencionados, essas soluções não se aplicam.

Isso funciona para mim:

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

Isso funciona para mim:

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

Isso funciona para mim:

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

Isso funciona para mim para alinhar a imagem ao centro de div.

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