Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 92

Visitas el mes pasado: 107

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




5. Imágenes (IV)

5.4 Imagen de fondo.

css

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:

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.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com