Unidad 17. Estilos CSS Avanzados (XIII)

background-position permite el posicionamiento de la imagen de fondo.

Selecciona entre los valores top, center, bottom y left, center, right.

En este caso podremos combinar dos de los valores, por ejemplo:

.cita {

   background-image: url(imagenes/quote.gif);

   background-repeat: no-repeat;

   background-position: right top;

}

Aunque puedes omitirlos, pero recuerda que si lo haces por omisión los valores serán top y left.

Igual que en algunos de los apartados anteriores (observa que siempre son las propieades con guiones) puedes utilizar la propiedad background para resumir las reglas CSS.

Así el siguiente bloque:

.cita {

   background-color: gray;

   background-image: url(imagenes/quote.gif);

   background-repeat: no-repeat;

   background-attachment: scroll;

   background-position: right top;

}

Puede ser escrito de la siguiente forma:

.cita {

   background: gray url(imagenes/quote.gif) no-repeat scroll right top;

}

Recuerda mantener el orden color, image, repeat, attachment y position.

Y ya sabes, si no quieres alguno, sáltatelo.

Para practicar realiza el Ejercicio Paso a Paso de Controles de Fondo.