CSS background-position, background-attachment, clip, origin y size. Shorthand fondo. Ejemplos (CU01031D)

Resumen: Entrega nº31 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01031D

 

 

PROPIEDADES DE FONDO

CSS tiene diferentes propiedades relacionadas con el fondo de las cajas del box-model o modelo de cajas. Ya conocemos algunas de ellas. Vamos a ampliar el conocimiento sobre los fondos estudiando otras propiedades: background-position, background-attachment, background-clip, background-origin, background-size y la propiedad shorthand background.

css

 

PROPIEDAD BACKGROUND-POSITION

Esta propiedad nos permite establecer la posición de una imagen de fondo. Por defecto hemos visto que la imagen de fondo se sitúa en la parte superior izquierda del elemento (justo en la esquina interior del borde), pero podremos especificar otra posición usando esta propiedad.

La sintaxis a emplear es del tipo:

selectorElemento {background-position: especificaciónDePosición; }
 
 
 

La especificación de posición puede hacerse de distintas maneras. Una de ellas es escribir dos porcentajes, representando el primero de ellos el desplazamiento x (horizontal) y el segundo el desplazamiento y (vertical). Ahora bien, ¿el % de qué medida es la que se usa? Se usa la medida del ancho y alto total disponible menos el ancho y alto de la imagen.

background-position css

 

 

A efectos prácticos, los resultados aplicando porcentajes son estos:

0% 0%: la imagen se coloca en posición superior izquierda (posición por defecto, no hay desplazamiento).

100% 0%: la imagen se coloca en posición superior derecha (se desplaza el total del espacio diferencia en horizontal).

0% 100%: la imagen se coloca en posición inferior izquierda (se desplaza el total del espacio diferencia en vertical).

100% 100%: la imagen se coloca en posición inferior derecha (se desplaza el total del espacio diferencia en vertical y en horizontal).

 

PROPIEDAD CSS background-position
Función de la propiedad Permite definir la posición de la imagen de fondo de un elemento.
Valor por defecto 0% 0%.
Aplicable a Todos los elementos.
¿Se hereda directamente? No
Valores posibles para esta propiedad Dos porcentajes (primer % indica horizontal, segundo % indica vertical)
Un porcentaje (indica % horizontal, y en la vertical se produce el centrado automático de la imagen)
Dos unidades de medida, relativas o absolutas (primera unidad indica el desplazamiento horizontal respecto al punto de inicio, segunda unidad indica el desplazamiento vertical respecto al punto de inicio).
Una unidad relativa o absoluta (indica desplazamiento horizontal respecto al punto de inicio, y en la vertical se produce el centrado automático de la imagen)
Dos palabras clave a elegir entre left, center y right en la horizontal y top, center y bottom en la vertical (primera palabra indica posición en la horizontal y segunda palabra clave indica posición en la vertical)
Una palabra clave a elegir entre left, center y right (indica posición en la horizontal; en la vertical se produce el centrado automático de la imagen).
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com background-position: 25% 45%;
background-position: 250px 2.55em;
background-position: center bottom;
background-position: right;
background-position: -10%;
background-position: -10px -10px;

 

 

Se admiten valores negativos para especificar la posición de la imagen de fondo. Los valores negativos se llevarán la imagen hacia fuera del espacio disponible y posiblemente quede una parte de la imagen no visible. Una utilidad que puede tener el establecer un valor negativo es para posicionar la imagen encima del borde izquierdo o del borde superior.

Si usamos dos o más imágenes de fondo podríamos fijar sus posiciones separando la especificación de posición de cada una de ellas como en este ejemplo, (aunque algunos navegadores antiguos pueden no reconocer esta sintaxis):

background-image: url(http://i.imgur.com/afC0L.jpg), url(http://www.crimsoneditor.com/images/logo.jpg);
background-repeat: no-repeat;
background-position: -10px -10px, right bottom;
 
 

 

PROPIEDAD BACKGROUND-ATTACHMENT

Esta propiedad nos permite establecer si la imagen se comporta como una imagen normal, y se muestra en una posición concreta, o si se desplaza a medida que el usuario se desplaza por la página web haciendo scroll de modo que aparece siempre fija como fondo de un elemento determinado (siempre que ese elemento esté visible en la pantalla).

El comportamiento normal se corresponde con la palabra clave scroll, mientras que el aparecer siempre fija como fondo cuando hay desplazamiento se corresponde con la palabra clave fixed. Hay otra nueva palabra clave, sólo soportada por las últimas versiones de los navegadores, que es local, cuyo significado es que si el elemento dentro del cual está la imagen tiene una barra de desplazamiento o scroll, la imagen permanece fija en ese elemento mientras se haga scroll en él.

La mejor forma de entender el comportamiento de background-attachment es realizar una prueba. Para ello vamos a utilizar el código HTML de base que venimos empleando a lo largo del curso.

Define los siguientes estilos css y visualiza el resultado en tu navegador:

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial; }
body {background-color: yellow;
background-image: url(http://i.imgur.com/afC0L.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {height: 450px; width: 2000px;}
h2 {height: 450px;}

 

 

Comprueba cómo la imagen se mantiene en la parte superior izquierda de la página web aunque te desplaces verticalmente hacia abajo (hemos introducido una altura y anchura desproporcionada para los elementos h1 y h2 simplemente para forzar que la página se expanda en la vertical y en la horizontal y poder comprobar mejor el efecto que se genera).

Un aspecto importante a tener en cuenta es que si se establece background-attachment: fixed; la posición de la imagen de fondo que visualizaremos ya no es la esquina interior  superior izquierda del elemento, sino que es la esquina superior izquierda de la ventana visible en el navegador. Esto puede hacer que la imagen de fondo no se vea (por haberse desplazado hasta la esquina superior izquierda de la ventana del navegador, quedando fuera del área de fondo del elemento), o que aparezca cortada aparentando ser una visualización errónea. Por eso muchos programadores y diseñadores web utilizan background-attachment preferentemente para poner imágenes de fondo al elemento body (cuya área de visualización coincide normalmente con la ventana del navegador). Si se usa background-attachment con otros elementos, hay que establecer la posición adecuadamente para que la visualización sea correcta.

Podrían especificarse varias imágenes de fondo y varios comportamientos de esta propiedad, de la misma forma que vimos para la propiedad background-position.

PROPIEDAD CSS background-attachment
Función de la propiedad Permite fijar una imagen de fondo fija aunque haya desplazamientos.
Valor por defecto scroll
Aplicable a Todos los elementos.
¿Se hereda directamente? No
Valores posibles para esta propiedad scroll (comportamiento normal)
fixed (la imagen se mantiene como fondo aún en desplazamientos)
local (la imagen se mantiene como fondo si el elemento tiene barras de desplazamiento y el usuario se mueve dentro del elemento)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com body { background-image: url(http://i.imgur.com/afC0L.jpg); background-repeat: no-repeat; background-attachment: fixed; }

 

 

OTRAS PROPIEDADES DE FONDO

Además de las propiedades de fondo que hemos visto, CSS contempla otras menos comunes que son las siguientes:

a) background-clip: determina la ubicación del área de fondo. Sus valores posibles son border-box, lo cual situa el área de fondo en la esquina exterior del borde en la parte superior izquierda, padding-box, lo cual sitúa el área de fondo en la esquina interior del borde en la parte superior izquierda del borde, o content-box, lo cual situa el área de fondo en la esquina superior izquierda del contenido quedando excluida el área de padding. El valor de defecto es border-box, lo que da lugar a que si hay un color de fondo se sitúe debajo del borde. La propiedad background-clip afecta tanto al color de fondo como a la imagen de fondo, sin embargo hay que tener en cuenta que la posición de la imagen de fondo es la que hemos indicado al hablar de background-image y no se ve afectada por border-clip. Es decir, la imagen se mantiene en su posición a no ser que especifiquemos otra. Con border-clip la imagen podría verse cortada (si reducimos el área de fondo). Esta propiedad puede no funcionar correctamente en navegadores antiguos.

b) background-origin: determina respecto a qué origen se ha de considerar la posición establecida mediante la propiedad background-position. Sus valores posibles son border-box, padding-box y content-box. Su valor de defecto es padding-box, de ahí que una imagen se sitúe en la esquina interior de la parte superior izquierda del borde. Si queremos situar la imagen en la parte exterior de la esquina (alineada con el borde) basta establecer el background-origin: border-box;

c) background-size: permite establecer el tamaño de las imágenes de fondo. Se pueden utilizar las palabras clave cover (indica que la imagen debe escalar su tamaño manteniendo sus proporciones hasta que encaje en una dimensión del fondo para cubrir completamente el área de fondo; la imagen puede verse cortada), auto (indica que la imagen se mantendrá con sus dimensiones originales si no se ha modificado ninguna de ellas, o sin deformarse en caso de haber especificado una de las dos dimensiones) ó contain (indica que la imagen debe escalarse manteniendo sus proporciones hasta alcanzar una de las dos dimensiones del área de fondo; la imagen no se cortará en ningún caso, pero el área de fondo puede quedar parcialmente descubierta). Esta propiedad puede no ser reconocida en navegadores antiguos.

 

La propiedad background-size también puede establecerse usando unidades de medida relativas o absolutas y especificando dos medidas o solo una medida.

Si se especifica solo una medida como background-size: 30%; ó background-size: 4.5em ó background-size: 50px, se entiende que esta medida establece el ancho (width) de la imagen. La altura automáticamente se trata como si tuviera valor auto.

Si se especifican dos medidas, la primera de ellas se considerará de aplicación a la dimensión horizontal y la segunda a la dimensión vertical. Por ejemplo en background-size: 4.5em 2.25em; la dimensión horizontal se establece en 4.5em y la vertical en 2.5em.

En el caso de usar porcentajes, el % se calcula respecto a las dimensiones del área de fondo de la imagen establecidas por background-origin. Por defecto coincide con el área de padding, pero puede cambiarse si se cambia el valor de la propiedad background-origin. También genera una alteración el uso de background-attachment: fixed; porque el área de fondo en este caso es el área visible de la ventana del navegador.

 

 

PROPIEDAD SHORTHAND BACKGROUND

Esta propiedad nos permite establecer de forma conjunta las diferentes propiedades de fondo.

La sintaxis a emplear es del tipo:

background: { valorColorDeFondo valorImagenDeFondo valorRepeticiónImagen valorPosiciónImagen valorSizeImagen valorOriginPosición ValorClipFondo valorAttachmentFondo } ;
 
 

 

No es necesario seguir un orden concreto para escribir las propiedades. Si se dejan algunos valores sin especificar, el navegador aplicará los valores por defecto que tengan esas propiedades sin especificar. Por ejemplo si escribimos: background: { blue url(img1.jpg) } ; los valores correspondientes a la repetición, attachment, posición, etc. serán los valores por defecto para estas propiedades.

Un aspecto importante a tener en cuenta si se usa la propiedad shorthand background, es que cualquier propiedad no especificada se sobreescribe a su valor por defecto anulando los posibles valores anteriores que se hubieran especificado. Por ejemplo si escribimos:

.content43 {background-repeat: no-repeat; background: url(http://i.imgur.com/afC0L.jpg); } podríamos pensar que la imagen no se a repetir porque hay indicado un valor no-repeat. Sin embargo, la imagen sí se repetirá porque aunque no lo hemos indicado específicamente, al incluir una propiedad shorthand con posterioridad a la especificación inicial de background-repeat, el valor de repetición se sobreescribe pasando a ser su valor de defecto (que es repeat, de ahí que la imagen sí se repetirá). Es un aspecto con el que conviene ser cuidadosos. En principio, si elegimos usar la propiedad shorthand, no debemos realizar otras especificaciones independientes para no incurrir en contradicciones.

esquema background css

 

 

El esquema anterior resume las propiedades relacionadas con el fondo (background) CSS. Obviamente no debemos pretender recordar de memoria todas las propiedades ni todos sus valores posibles o palabras clave asociadas. No obstante, debemos tener conocimiento de las posibilidades que nos ofrece CSS para el manejo de fondos y saber buscar información y aplicar nuestro conocimiento de la lógica de CSS cada vez que nos sea necesario. Para ello es conveniente realizar pruebas y escribir código en nuestro ordenador.

 

 

CAPAS DE VISUALIZACIÓN

Hemos visto que en el box-model o modelo de cajas CSS intervienen diferentes elementos como un contenido, un borde, un relleno o padding, una imagen de fondo, un color de fondo y un margen. Cuando varios elementos se superponen unos tienen que visualizarse encima de otros, y de ahí que hablemos de modelo tridimensional o modelo de capas para las cajas CSS. El orden en que se muestran los elementos es:

a)      El borde se superpone al resto de elementos (capa 1)

b)      El contenido y el padding se sitúan debajo del borde (capa 2)

c)       La imagen de fondo se sitúa debajo del contenido y el padding (capa 3)

d)      El color de fondo y el margen se sitúan debajo de la imagen de fondo (capa 4)

 

 

EJERCICIO

Crea un documento HTML con 4 elementos div de 400 píxeles de ancho y 400 píxeles de alto, todos ellos con un margin de 40 píxeles en todas direcciones y un padding de 40 píxeles en todas direcciones. En cada uno de los elementos div crea un borde y coloca una imagen de fondo diferente y un background-color diferente. Usa la propiedad background-position para hacer que la imagen esté centrada tanto vertical como horizontalmente respecto al borde del div (por ejemplo, si una imagen mide 100x100 píxeles, deberá existir la misma distancia hasta el borde del div en las cuatro direcciones). Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

SEPTIEMBRE - OCTUBRE 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación