Característica background-position en CSS

La propiedad background-position CSS establece la posición inicial de cada imagen de fondo, en relación con el principio definido en la propiedad background-origin.

Funciones background position en css

Valor inicial	`0% 0%`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	Sí
Valor calculado	Una lista con más de un elemento, y cada elemento consta de dos palabras reservadas que representan el principio y el espaciado de los bordes, que se dan en longitudes absolutas ( `<length>`), o se considerarán como porcentajes.

/* palabras reservadas */ 
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
/* porcentajes */ 
background-position: 25% 75%;
/* longitudes absolutas */ 
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
/* múltiples imágenes */ 
background-position: 0 0, center;
/* espaciado desde los bordes */ 
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;    
/* valores globales */ 
background-position: inherit;
background-position: initial;
background-position: unset;

Ejemplos y aplicaciones

Las siguientes dos reglas centrarán la imagen de fondo en el elemento. Tenga en cuenta que usamos la palabra reservada centeren la primera regla y el porcentaje 50%en la segunda regla:

background-position: center;
background-position: 50% 50%;

En cuanto a ajustar la posición de la imagen de fondo a la esquina inferior derecha del elemento, podemos usar las dos palabras reservadas bottom y right, tenga en cuenta que el orden de las dos palabras reservadas no es importante porque no usamos un valor de longitud <length> o porcentaje <percentage> en la base:

background-position: bottom right;
background-position: right bottom;

Especifique que la imagen de fondo estará a una distancia 10pxdel borde izquierdo y adyacente al borde inferior:

background-position: left 10px bottom;

Especifique que la imagen de fondo estará a una distancia 10pxdel borde izquierdo y a una distancia 1emdel borde inferior:

background-position: left 10px bottom 1em;

Código HTML:

<div class="example1"><code>background-position: top;</code></div>
<div class="example2"><code>background-position: bottom;</code></div>
<div class="example3"><code>background-position: left;</code></div>
<div class="example4"><code>background-position: right;</code></div>
<div class="example5"><code>background-position: center;</code></div>
<div class="example6"><code>background-position: 25% 75%;</code></div>
<div class="example7"><code>background-position: 0 0;</code></div>
<div class="example8"><code>background-position: 1cm 2cm;</code></div>
<div class="example9"><code>background-position: 10ch 8em;</code></div>
<div class="example10"><code>background-position: bottom 10px right 20px;</code></div>
<div class="example11"><code>background-position: right 3em bottom 10px;</code></div>
<div class="example12"><code>background-position: bottom 10px right;</code></div>
<div class="example13"><code>background-position: top right 10px;</code></div>

Código CSS:

div {
  border: solid 2px #cececf;
  padding: 10px;
  margin: 20px;
  background-color: #f8f9fa;
  background-image: url(bigcode-logo-green.svg);
  background-size: 40px;
  background-repeat: no-repeat;
  float: left;
  width: 200px;
  height: 200px;
}
.example1  { background-position: top; }
.example2  { background-position: bottom; }
.example3  { background-position: left; }
.example4  { background-position: right; }
.example5  { background-position: center; }
.example6  { background-position: 25% 75%; }
.example7  { background-position: 0 0; }
.example8  { background-position: 1cm 2cm; }
.example9  { background-position: 10ch 8em; }
.example10 { background-position: bottom 10px right 20px; }
.example11 { background-position: right 3em bottom 10px; }
.example12 { background-position: bottom 10px right; }
.example13 { background-position: top right 10px; }

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	4.0	3,5	1.0
Múltiples orígenes	1.0	3.6	9.0	10,5	1.3

Estructura general

La propiedad acepta background-position más de un valor <position> separado por una coma.

<position>

El valor define las <position> coordenadas (X, Y) de la posición de la imagen en relación con los bordes del cuadro del elemento, y este valor se puede especificar de una de estas dos formas:

Definir un solo valor

Este valor podría ser:

La palabra reservada center, que centra la imagen.
Una de las palabras reservadas top, left, bottom o right, que especifica a qué borde se colocará la imagen junto, y se establecerá la otra dimensión 50%, es decir, la imagen se colocará en el centro del borde seleccionado.
longitud <length> o porcentaje <percentage>; que establece la coordenada X relativa al borde izquierdo, y el valor de Y se establecerá automáticamente en 50%.

Definir dos valores

El primer valor define las coordenadas X (es decir, right, left o center), y el segundo valor define las coordenadas Y (es decir, topo bottom o center), y cualquiera de ellas puede ser una de las siguientes:

Una de las palabras reservadas topo left, bottom o right, y si usamos left o right establecemos las coordenadas X y el otro valor establece las coordenadas Y, y si usamos top o bottom establecemos las coordenadas Y y el otro valor establece las coordenadas X.
longitud <length>o porcentaje <percentage>. Si el otro valor es left o, right entonces este valor determina las coordenadas y relativas al borde superior, y si el otro valor es top o, bottom entonces este valor determina las coordenadas X relativas al borde izquierdo. Si ambos valores son longitud <length> o porcentaje <percentage>, entonces el primer valor definirá las coordenadas X y el segundo valor definirá las coordenadas Y.

Tenga en cuenta que:

Si es el primer valor topo bottom, no puede ser el segundo valor topo bottom.
Y si el primer valor es left o right, entonces el segundo valor puede no ser left o right, y esto significa que los valores top top y left right no son válidos.
Si ambos valores son palabras reservadas, pueden estar en el orden que desee (como top left o left top), pero el orden de los valores no se puede cambiar si uno de ellos es una longitud o un valor porcentual (es decir, puede utilizarse, left 10px pero no se puede utilizar 10px left).

Seleccione tres o cuatro valores

Soporte agregado recientemente para especificar tres o cuatro valores, los valores adicionales representan la cantidad de desplazamiento desde el borde y el desplazamiento viene después de la palabra reservada. El valor left 10px bottom 1em significa que la imagen de fondo se alejará 10px del borde izquierdo del elemento y 1em del borde inferior del mismo.

Tenga en cuenta que podemos ajustar la compensación desde el borde izquierdo solo eliminando el valor de compensación después de la segunda palabra reservada, como en left 10px bottom, u omitiendo la compensación desde el borde inferior solo eliminando el valor de compensación de la primera palabra reservada como en left bottom 1em.

Estructura formal

background-position: <position>#;

dónde:

<position> = [[ left | center | right | top | bottom | <length-percentage> ] | 
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | 
[ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]

dónde:

<length-percentage> = <length> | <percentage>

Ver también

Propiedades de la página incautados por la propiedad de acceso directo background: la background-clip, background-color, background-image, background-origin, background-repeat, background-size y background-attachment.
Página de propiedades color para establecer el color del elemento.
Ajuste los márgenes margin y las notas al pie padding.
propiedad y box-sizing característica float.