Propiedad de posición de fondo CSS

❮ Anterior Referencia completa de CSS Siguiente ❯

Ejemplo

Cómo colocar una imagen de fondo:

body {
  background-image: url('w3css.gif');
background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

Más ejemplos de "Pruébelo usted mismo" a continuación.

Definición y uso

La background-positionpropiedad establece la posición inicial de una imagen de fondo.

Sugerencia: De forma predeterminada, se coloca una imagen de fondo en la esquina superior izquierda de un elemento y se repite tanto vertical como horizontalmente.

Valor por defecto:	0% 0%
Heredado:	No
Animable:	si. Leer sobre animable
Versión:	CSS1
Sintaxis de JavaScript:	objeto .style.backgroundPosition="centro"

Compatibilidad con navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Property
background-position	1.0	4.0	1.0	1.0	3.5

Nota: IE8 y versiones anteriores no admiten varias imágenes de fondo en un elemento.

Sintaxis CSS

background-position: value;

Valores de propiedad

Value	Description	Play it
left top left center left bottom right top right center right bottom center top center center center bottom	If you only specify one keyword, the other value will be "center"
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Más ejemplos

Ejemplo

Cómo colocar una imagen de fondo para que se centre en la parte superior:

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}

Ejemplo

Cómo colocar una imagen de fondo para que esté en la parte inferior derecha:

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}

Ejemplo

Cómo posicionar una imagen de fondo usando porcentaje:

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}

Ejemplo

Cómo posicionar una imagen de fondo usando píxeles:

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 150px;
}

Ejemplo

Use diferentes propiedades de fondo para crear una imagen de "héroe":

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}