Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

.

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

5. Imágenes (IV)

5.4 Imagen de fondo.

Repetición de la imagen

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.

Ver página ejemplo

Posición de la imagen

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.

Ver página ejemplo

Imagen fija de fondo

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

Ver página ejemplo

Propiedad Background tipo "shorthand"

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:

Estilo de tablas.

Si estamos siguiendo los manuales de HTML y CSS al mismo tiempo, seguiremos en HTML, con el siguiente tema:

Tablas.

Página creada por ANYELGUTI.

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