Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

CSS3 III

Más propiedades de fondos

Tamaño de la imagen de fondo

Hasta ahora al poner una imagen de fondo no podíamos cambiar su tamaño, el fondo muestra la imagen en su tamañó real, sin poder modificarla. La unica posibilidad era modificar la imagen en sí cambiándole el tamaño mediante un programa de retoque de imágenes (gif animator, photoshop, etc), y utilizar la imagen resultante.

Sin embargo en CSS3 hay una nueva propiedad para las imágenes de fondo: background-size, con la cual podemos definir el tamaño que tendrá la imagen de fondo.

PROPIEDAD background-size

Esta propiedad permite modificar la imagen de fondo variando su tamaño. por supuesto antes debemos haber definido una imagen de fondo mediante background-image. Los valores que admite son medidas, porcentajes y las palabras clave auto, contain y cover.

auto : Es el valor por defecto, y muestra la imagen en su tamaño real.

background-size: auto;

Medidas : Podemos poner una o dos medidas. Si ponemos una medida se corresponde a la anchura de la imagen, la altura se ajustará proporcionalmente. Si ponemos dos medidas la primera corresponderá a la anchura y la segunda a la altura, la imagen se distorsionará si no se sigue la misma proporción que en las medidas reales. Podemos sustituir cualquier medida por la palabra clave auto, en este caso la imagen se ajustará en proporción a la otra medida.

background-size: 40px;

background-size: 40px 70px;

background-size: auto 70px;

Porcentajes : Podemos sustituir las medidas por porcentajes, el porcentaje se mide respecto a las medidas originales de la imagen. Podemos mezclar porcentajes, medidas, y/o la palabra auto en una misma propiedad.

background-size: 70% 80px;

background-size: auto 75%;

contain : El uso de este valor excluye el uso de medidas o porcentajes. Con contain la imagen de fondo ocupará todo el ancho o alto disponible, según lo que se llene primero; por lo que la imagen se verá siempre en su totalidad y al mayor tamaño posible. Si la imagen no se ajusta a las proporciones del contenedor quedará un hueco libre (en anchura o en altura, en el cual si hemos elegido la opcion background-repeat: repeat, veremos repetida parte de la imagen.

background-size: countain;

cover : Como en el anterior, al usar este valor no podemos usar medidas o porcentajes. En cover la imagen se amplia hasta ocupar todo el elemento, ajustándose a la anchura o altura, hasta que no quede ningún hueco libre. Si el elemento contenedor no es de la misma proporción que la imagen, parte de ésta no será visible por desbordarlo.

background-size: cover;

Múltiples imágenes de fondo

Vimos en la página anterior cómo incluir en un mismo fondo varias imágenes. Si hemos incluido varias imágenes en un mismo fondo y queremos aplicar diferentes tamaños a cada imagen, la propiedad background-size indicará los valores de tamaño de cada imagen separados por comas:

background-image: url(fondo1.gif), url(fondo2.gif);

background-size: cover, 75px 50px;

Propiedad tipo "shorthand"

Podemos incluir el background-size en la propiedad background tipo "shorthand", para ello lo indicaremos mediante una barra inclinada ( /80px 20px ) y después del backgound-position y antes del background-repeat:

background: img(fondo1.jpg) top left /75px 50px repeat;

El uso de esta propiedad tipo "shorthand" funciona actualmente sólo en el navegador Opera, por lo que si queremos verlo en el resto de navegadores, debemos usar la propiedad de manera individual.

Compatibilidad con navegadores

La propiedad es compatible con las últimas versiones de Firefox, Safari, Chrome y Opera, Internet Explorer no la admite en su version 8, aunque es casi seguro que la adoptará en su proxima version (IE 9).

Ejemplos de background-size

La página del siguiente enlace muestra varios ejemplos en los que se ha utilizado la propiedad background-size.

Propiedad background-size

PROPIEDADES border-origin y border-clip

propiedad border-origin

La propiedad border-origin indica el punto de origen desde el cual se posiciona la imagen de fondo. hay tres posibles valores:

Propiedad border-clip

Esta propiedad indica el espacio en el que será visible la imagen de fondo. Sus posibles valores son los mismos que para border-origin; es decir:

Uso de estas propiedades

Al igual que el resto de las propiedades tipo backgound podemos también usarlas para multiples imágenes de fondo. En este caso los valores de cada imagen irán separados por comas.

La compatibilidad de estas propiedades con los navegadores es igual que en el resto de propiedades, es decir, están ya disponibles en las últimas versiones de Firefox, Safari, Chrome y Opera, y se espera que Internet Explorer las incorpore en su nueva version (IE 9).

Para incluir estas propiedades en una tipo "shorthand" (background) debemos poner su valor al final: Firefox, Safari y Chrome juntan las dos propiedades, por lo que solo adimten un valor que aplican conjuntamente a las dos propiedades, Opera, sin embargo reconoce las dos propiedades, debiendo poner sus valores en el orden: "origin" "clip".

Para Firefox, Safari y Chrome:

background: url(fondo1.gif) top left repeat content-box;

En Opera:

background: url(fondo1.gif) top left repeat padding-box content-box;

Ejemplos de background-origin y background-clip.

La página del siguiente enlace muestra varios elementos a los que se les han aplicado estas propiedades:

Propiedades background-origin y background-clip






En la siguiente página veremos cómo crear esquinas redondeadas para los elementos de bloque. Esquinas redondeadas



Manual CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo