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

136

É 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?

oompahloompah
fonte

Respostas:

279
#doit {
    background: url(url) no-repeat center;
}
Jake Lucas
fonte
25
Obrigado. O CSS específico para centralização é "background-position: center;"
pmont
@ Green: veja minha resposta para imagens de fundo de sprites.
Clayton
3
Se você quiser toda a div para ser preenchido com a imagem e nenhum espaço extra que você deve usar background-size: cover; se você quiser a imagem inteira para mostrar sem qualquer parte da imagem que está sendo cortado fora ou esticado que pretende utilizarbackground-size: contain;
Zlerp
80

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);

TimCodes.NET
fonte
na verdade, você só precisabackground-position:center;
Dave Sag
A resposta selecionada faz com que todo o meu histórico desapareça por algum motivo (para ser justo, estou fazendo algumas coisas de jquery que podem estar causando isso?), Mas essa resposta funciona. Voto a favor.
bwoogie
15

Use a posição de fundo:

background-position: 50% 50%;
Cápsula
fonte
1
útil se você precisar da imagem centralizada horizontalmente, mas na parte superior verticalmente: posição de fundo: 50% 0%;
Sébastien Gicquel
50% 0 é mais curto do que ;-) No CSS, você nunca precisa de nenhuma unidade quando o valor é 0
Capsule
8

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 .

Morteza Sadri
fonte
7

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.

Clayton
fonte
5

Isso funciona para mim:

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

Isso funciona para mim:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}
Collin Adams
fonte
1
margin: 0 auto;onde o autofaz centralizar horizontalmente dentro da div. Obrigado!
Oyalhi
1

Isso funciona para mim:

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

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;
}
sangfroid-eng
fonte