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

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;tratar
background-position:center;EDITAR: dado que esta pregunta está obteniendo muchas vistas, vale la pena agregar información adicional:
text-align: centerno 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 debackground-position: center center; (background-position: horizontal vertical);fuente
background-position:center;Use background-position:
fuente
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 desdetopy hacia losleftlados del elemento. La sintaxis CSS esbackground-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:
Sé que es muy confuso, pero significa:
Y sé que también
background-sizees una propiedad nueva y, en el código comprimido, lo que es,/coverpero estos códigos, significafilldimensionamiento y posicionamiento de fondo en el fondo del escritorio de Windows.Puede ver más detalles acerca
background-positionde aquí ybackground-sizede aquí .fuente
Si su imagen de fondo es una hoja de sprite alineada verticalmente, puede centrar horizontalmente cada sprite de esta manera:
Si su imagen de fondo es una hoja de sprite alineada horizontalmente, puede centrar verticalmente cada sprite de esta manera:
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.
fuente
Esto funciona para mi:
fuente
Esto funciona para mi:
fuente
margin: 0 auto;dondeautohace que se centre horizontalmente dentro del div. ¡Gracias!Esto funciona para mi:
fuente
Esto funciona para mí para alinear la imagen al centro de div.
fuente