¿Cómo centrar una imagen (de fondo) dentro de un div?

136

¿Es posible centrar una imagen de fondo en un div? He intentado casi todo, pero no he tenido éxito:

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

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

es posible?

oompahloompah
fuente

Respuestas:

279
#doit {
    background: url(url) no-repeat center;
}
Jake Lucas
fuente
25
Gracias. El CSS específico para centrar es "background-position: center;"
pmont
@ Verde: vea mi respuesta para imágenes de fondo de sprites.
Clayton
3
Si desea que todo el div se llene con la imagen y no haya espacio adicional, debe usarlo background-size: cover; Si desea que se muestre toda la imagen sin que se corte o estire ninguna parte de la imagen que desea usarbackground-size: contain;
Zlerp
80

tratar background-position:center;

EDITAR: dado que esta pregunta está obteniendo muchas vistas, vale la pena agregar información adicional:

text-align: center no funcionará porque la imagen de fondo no forma parte del documento y, por lo tanto, no forma parte del flujo.

background-position:centeres la abreviatura de background-position: center center; ( background-position: horizontal vertical);

TimCodes.NET
fuente
en realidad solo necesitasbackground-position:center;
Dave Sag
La respuesta seleccionada hace que todo mi fondo desaparezca por alguna razón (para ser justos, ¿estoy haciendo algunas cosas jquery que pueden estar causándolo?), Pero esta respuesta funciona. Voto a favor.
bwoogie
15

Use background-position:

background-position: 50% 50%;
Cápsula
fuente
1
útil si necesita la imagen centrada horizontalmente pero arriba verticalmente: posición de fondo: 50% 0%;
Sébastien Gicquel
50% 0 es más corto que ;-) En CSS, nunca necesitas ninguna unidad cuando el valor es 0
Cápsula
8

Para centrar o posicionar la imagen de fondo, debe usar la background-positionpropiedad. La propiedad de posición de fondo establece la posición inicial de una imagen de fondo desde topy hacia los leftlados del elemento. La sintaxis CSS es background-position : xvalue yvalue;.

Los valores admitidos "xvalue" e "yvalue" son unidades de longitud como, pxy nombres de porcentaje y dirección como left, right y etc.

El "valor x" es la posición horizontal del fondo y comienza desde la parte superior del elemento. Significa que si lo usas 50pxestará a "50 px" de la parte superior de los elementos. Y "yvalue" es la posición vertical que tiene la misma condición.

Entonces, si usa background-position: center;su imagen de fondo, estará centrada.

Pero siempre uso este código:

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

Sé que es muy confuso, pero significa:

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

Y sé que también background-sizees una propiedad nueva y, en el código comprimido, lo que es, /coverpero estos códigos, significa filldimensionamiento y posicionamiento de fondo en el fondo del escritorio de Windows.

Puede ver más detalles acerca background-positionde aquí y background-sizede aquí .

Morteza Sadri
fuente
7

Si su imagen de fondo es una hoja de sprite alineada verticalmente, puede centrar horizontalmente cada sprite de esta manera:

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

Si su imagen de fondo es una hoja de sprite alineada horizontalmente, puede centrar verticalmente cada sprite de esta manera:

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

Si su hoja de sprite es compacta, o no está tratando de centrar su imagen de fondo en uno de los escenarios mencionados anteriormente, estas soluciones no se aplican.

Clayton
fuente
5

Esto funciona para mi:

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

Esto funciona para mi:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}
Collin Adams
fuente
1
margin: 0 auto;donde autohace que se centre horizontalmente dentro del div. ¡Gracias!
oyalhi
1

Esto funciona para mi:

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

Esto funciona para mí para alinear la imagen al centro de div.

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