CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 51
Visitas el mes pasado: 153
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
En La página anterior vimos cómo colocar una imagen de fondo en una página o en un elemento de la página. Podemos controlar la forma en que aparece esta imagen mediante distintas propiedades CSS.
Una vez que hemos puesto una imagen de fondo mediante la propiedad background-image, vista en la página anterior, tenemos otras propiedades que controlan el estilo de esta imagen. Veamos ahora cómo controlar la repetición de la imagen de fondo.
La imagen de fondo se repite por defecto, sin embargo eso puede cambiarse mediante
la propiedad background-repeat
, la cual tiene la siguiente definición:
background-repeat | Repetición de la imagen de fondo |
---|---|
Valores | repeat | repeat-x | repeat-y | no-repeat | inherit |
Descripción | Controla la forma en la que se repiten las imágenes de fondo |
Valor inicial | repeat |
Se aplica a | Todos los elementos |
Los valores que puede tomar esta propiedad controlan la forma en la que se repite o no la imagen de fondo de la siguiente manera:
background-repeat: repeat;
: repite la imagen en sentido vertical y horizontal a lo largo de
todo el espacio del elemento contenedor. Es el valor por defecto.background-repeat: repeat-x;
: repite la imagen sólo en horizontal, no repitiéndose en vertical.background-repeat: repeat-y;
: repite la imagen sólo en vertical, no repitiéndose en horizontal.background-repeat: no-repeat;
: muestra una sola vez la imagen y no se repite en ninguna dirección.La siguiente página muestra ejemplos de la imagen de fondo con los diferentes valores de la
propiedad background-repeat
.
Podemos controlar la posición de la imagen del fondo mediante la propiedad
background-position
. Esta propiedad indica la distancia que se desplaza la imagen
respecto de la esquina superior izquierda. Su definición es la siguiente:
background-position | Posición de la imagen de fondo |
---|---|
Valores | ( ( <porcentaje> | <medida> | left | center | right) ( <porcentaje> | <medida> | top | center | bottom )? ) | ( ( left | center | right ) || ( top | center| bottom ) ) | inherit |
Descripción | Controla la posición de la imagen de fondo del elemento |
Valor inicial | 0% 0% |
Se aplica a | Todos los elementos |
Indicaremos dos valores, los cuales pueden ser porcentajes, medidas o palabras clave. El primero indica el desplazamiento horizontal y el segundo el desplazamiento vertical. Si sólo se indica un porcentaje o medida, se entiende que es referido al desplazamiento horizontal, y al vertical se le asigna automáticamente un valor del 50%.
Se pueden usar también las palabras clave left, center, right
(izquierda, centro,
derecha) en la primera medida, que equivalen a los porcentajes 0%, 50%, 100% respectivamente.
Asimismo se pueden usar las palabras clave top, center, bottom
(arriba, centro,
abajo) en la segunda medida, equivalentes a los porcentajes 0%, 50% y 100% respectivamente.
En la siguiente página se muestran ejemplos de la imagen de fondo con los diferentes valores de las
propiedades background-repeat
y background-position
consiguiendo diferentes
efectos.
Podemos también hacer que la imagen de fondo se muestre fija mientras desplazamos la ventana
del navegador, para ello utilizaremos la propiedad background-attachment
cuya definición
es la siguiente.
background-attachment | Comportamiento de la imagen de fondo |
---|---|
Valores | scroll | fixed | inherit |
Descripción | Controla la forma en la que se visualiza la imagen de fondo: permanece fija cuando se hace scroll en la ventana del navegador o se desplaza junto con la ventana |
Valor inicial | scroll |
Se aplica a | Todos los elementos |
El valor fixed
fija la imagen al fondo de la página, con lo cual ésta no se desplaza
aunque desplacemos la página en horizontal o en vertical. El valor scroll
es el que tiene
por defecto, su comportamiento es el normal y el fondo se desplaza con la página.
La siguiente página es un ejemplo de la aplicación de la propiedad backgfround-attachment
en donde la imagen de fondo no se desplaza aunque desplacemos la página
Las propiedades vistas anteriormente pueden reunirse en una única propiedad tipo "shorthand" cuya definición es la siguiente:
background | Fondo de un elemento |
---|---|
Valores | ( <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ) | inherit |
Descripción | Establece todas las propiedades del fondo de un elemento |
Valor inicial | - |
Se aplica a | Todos los elementos |
Esta propiedad reune las anteriores, podemos indicar en una sóla propiedad todos los valores del fondo de la misma manera que hemos visto en las propiedades anteriores. el orden en que se indiquen las propiedades es indiferente, y no es necesario indicarlas todas (si no se indican toman el valor por defecto), aunque en general se suele seguir el formato indicado anteriormente: color, imagen, repeticion, posicion, comportamiento.
Si sigues sólo el manual de CSS continuaremos en el siguiente tema:
Si estamos siguiendo los manuales de HTML y CSS al mismo tiempo, seguiremos en HTML, con el siguiente tema:
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com