Cómo centrar una imagen (de fondo) dentro de un div?
¿ Es posible centrar una imagen de fondo en un div? He intentado casi todo-pero ningún éxito:
<div id="doit">
Lorem Ipsum ...
</div>
//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }
Es esto posible?
8 answers
#doit {
background: url(url) no-repeat center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-18 10:39:11
Intenta background-position:center;
EDITAR: dado que esta pregunta está recibiendo muchas vistas, vale la pena agregar algo de información adicional:
text-align: center
no funcionará porque la imagen de fondo no es parte del documento y, por lo tanto, no es parte del flujo.
background-position:center
es la abreviatura de background-position: center center
; (background-position: horizontal vertical
);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-25 16:41:18
Use background-position:
background-position: 50% 50%;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-18 10:36:44
Si su imagen de fondo es una hoja de sprites alineada verticalmente, puede centrar horizontalmente cada sprite de la siguiente 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 sprites alineada horizontalmente, puede centrar verticalmente cada sprite de la siguiente 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-25 00:25:27
Esto funciona para mí:
#doit{
background-image: url('images/pic.png');
background-repeat: no-repeat;
background-position: center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-13 22:04:39
Para centrar o posicionar la imagen de fondo debe usar la propiedad background-position
.
La propiedad background-position establece la posición inicial de una imagen de fondo de los lados top
y left
del elemento .
La sintaxis CSS es background-position : xvalue yvalue;
.
Los valores soportados"xvalue" e "yvalue" son unidades de longitud como px
y nombres de porcentaje y dirección como left, right y etc.
El "xvalue" es la posición horizontal del fondo y comienza desde la parte superior del elemento . Significa 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 .
Así que si usas background-position: center;
tu imagen de fondo estará centrada .
Pero siempre uso este código:
.yourclass {
background: url(image.png) no-repeat center /cover;
}
Sé que es tan confuso pero significa :{[15]]}
.yourclass {
background-image: url(image.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
Y sé que también el background-size
es una propiedad nueva y en el código comprimido lo que es /cover
pero estos códigos significa fill
tamaño de fondo y posicionamiento en fondo de escritorio de Windows .
Usted puede ver más detalles acerca de background-position
en aquí y background-size
en aquí .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-17 15:44:04
Esto funciona para mí:
.network-connections-icon {
background-image: url(url);
background-size: 100%;
width: 56px;
height: 56px;
margin: 0 auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-07 20:19:46
Esto funciona para mí:
<style>
.WidgetBody
{
background: #F0F0F0;
background-image:url('images/mini-loader.gif');
background-position: 50% 50%;
background-repeat:no-repeat;
}
</style>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-12 16:36:59