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

Question

¿Es posible centrar una imagen de fondo en un div? Intenté casi todo, pero no tuve éxito:

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

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

¿Esto es posible?

Answer 1

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

Answer 2

tratar background-position:center;

EDIT: ya que esta cuestión está recibiendo una gran cantidad de puntos de vista, vale la pena añadir algo de información extra:

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

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

Answer 3

Uso background-position:

background-position: 50% 50%; 

Answer 4

Esto funciona para mí:

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

Answer 5

Esto funciona para mí:

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

Answer 6

Si la imagen de fondo es un verticalmente hoja de sprites alineados, puedes horizontalmente centrar cada sprite como esto:

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

Si la imagen de fondo es una hoja de sprites alineadas horizontalmente, puede centrar verticalmente cada sprite como esto:

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

Si su hoja de sprites es compacto, o usted es no tratando de centrar su imagen de fondo en uno de los escenarios antes mencionados, estas soluciones no se aplican.

Answer 7

Esto funciona para mí:

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

Answer 8

para el centro o el posicionamiento de la imagen de fondo que debe utilizar background-position propiedad. La propiedad background-position ajusta la posición de partida una imagen de fondo de top y left lados del elemento. La sintaxis CSS es background-position : xvalue yvalue;.

"xvalue" y "yvalue" valores admitidos son unidades de longitud como px y nombres de porcentaje y dirección como izquierda, derecha y etc.

El "xValue" es la posición horizontal del fondo y comienza desde la parte superior del elemento. Significa que si usa 50px estará "50px" lejos de la parte superior de los elementos. Y "yvalue" es la posición vertical que tiene la misma condición.

tanto, si utiliza background-position: center; se centrarán su imagen de fondo.

Pero siempre uso este código:

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

Sé que es tan confuso pero significa:

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

Y yo También sabemos que background-size es una propiedad nueva y en el código comprimido lo que es /cover, pero estos códigos significan el tamaño de fondo fill y el posicionamiento en el fondo del escritorio de Windows.

Puede ver más detalles sobre background-position en here y background-size en here.