¿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: center
no funcionará porque la imagen de fondo no forma parte del documento y, por lo tanto, no forma parte del flujo.background-position:center
es 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-position
propiedad. La propiedad de posición de fondo establece la posición inicial de una imagen de fondo desdetop
y hacia losleft
lados del elemento. La sintaxis CSS esbackground-position : xvalue yvalue;
.Los valores admitidos "xvalue" e "yvalue" son unidades de longitud como,
px
y 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
50px
estará 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-size
es una propiedad nueva y, en el código comprimido, lo que es,/cover
pero estos códigos, significafill
dimensionamiento y posicionamiento de fondo en el fondo del escritorio de Windows.Puede ver más detalles acerca
background-position
de aquí ybackground-size
de 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;
dondeauto
hace 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