Fondo en CSS3
Hay propiedades de CSS2.1 que se mantienen igual, otras que se modifican y se crean nuevas propiedades.
Propiedades que no se modifican:
background-color: Para definir el color de fondo.
background-position: Para definir la posición del fondo.
Propiedades que se modifican:
background-image: Para definir la imagen de fondo. Ahora permite múltiples imágenes.
background-repeat: Para definir la repetición de la imagen del fondo. Se añaden los valores space y round y se permite la repetición de pareja de valores dobles que representa la repetición horizontal y vertical.
background-attachment: Para definir el desplazamiento. Admite un nuevo valor local.
Propiedades nuevas:
background-clip: Define el recorte el fondo.
background-origin: Define en inicio del fondo.
background-size: Define en tamaño del fondo.
background-image
Se puede utilizar múltiples imágenes de fondo con la propiedad background-image en combinación con las propiedades background-position y background-repeat. La primera imagen será la primera definida y el resto se irán colocando encima sucesivamente. Las imágenes se separan por comas. Si hay un color de fondo se coloca por debajo de las capas de las imágenes.
#fondomultiple { width: 500px; height: 250px; background-image: url(fondo1.png), url(fondo2.png); background-position: center bottom, left top; background-repeat: no-repeat; }
background-repeat
Te permite repetir el fondo de una imagen, en CSS 2.1 se admitía un único valor entre repeat, repeat-x, repeat-y y no-repeat. En CSS3 va a permitir uno o dos valores (repetición horizontal y vertical) y vamos a añadir dos nuevos valores space y round. Chome, Opera y Safari admiten este doble valor y Opera admite los valores space y round.
El valor repeat equivale a repeat repeat, el valor repeat-x equivale a repeat no-repeat y el valor repeat-y equivale a no-repeat repeat.
Ejemplo:
<div style="background-image: url(fondo.jpg); background-repeat: repeat-x;">Capa con valor de fondo space </div>
equivale a:
<div style="background-image: url(fondo.jpg); background-repeat: repeat no-repeat;">Capa con valor de fondo space </div>
El valor space (que equivale a space space) rellena todo el fondo para ello espacia las imágenes horizontal y/o verticalmente para no cortar ninguna. Solo Opera lo admite pero solo lo ajusta verticalmente.
Ejemplo:
<div style="background-image: url(fondo.jpg); background-repeat: space;">Capa con valor de fondo space </div>
El valor round (que equivale a round round) rellena todo el espacio para ello escala la imagen de fondo horizontal y/o verticalmente para no cortar ninguna. Solo Opera lo admite pero solo lo ajusta verticalmente.
Ejemplo:
<div style="background-image: url(fondo.jpg); background-repeat: round;">Capa con valor de fondo round </div>
background-attachment
A los valores que ofrecía CSS 2.1: scroll (el valor por defecto, donde la imagen de fondo se desplaza con toda la página) y fixed (la imagen de fondo se queda fija en en el fondo), hay que añadir un nuevo valor: local.
El valor local el desplazamiento se hace respecto a la barra del contenedor (si la tuviese). Solo funciona con Chrome, Opera y Safari.
Ejemplo:
En este ejemplo con la propiedad overflow: auto que recorta lo que sobresale y pone una barra vertical de desplazamiento.
<div style="height: 6em; overflow: auto; padding-left: 6em; background-image: url(fondo.jpg); background-repeat: repeat-y; background-attachment: local;">Ejemplo valor local<br/><br/><br/><br/><br/></div>
background-clip
Es una nueva propiedad de CSS3 que nos permite recortar el área de fondo de una caja ajustándola al borde (border-box), al padding (padding-box) o al contenido (content-box). Por defecto está ajustada al borde.
background-clip: border-box|padding-box|content-box;
Ejemplo:
#ajustecontenido { padding:25px; border:5px dotted #000000; background-color:yellow; background-clip:content-box; } #ajustepadding { padding:25px; border:5px dotted #000000; background-color:yellow; background-clip:padding-box; } #ajusteborde { padding:25px; border:5px dotted #000000; background-color:yellow; background-clip:border-box; } <div id="ajustecontenido">Contenido</div> <div id="ajustepadding">Padding</div> <div id="ajusteborde">Borde</div>
background-origin
Nos permite definir el origen del fondo de una caja ajustándola al borde (border-box), al padding (padding-box) o al contenido (content-box). Por defecto está ajustada al borde.
background-origin: border-box|padding-box|content-box;
<style> div { border:10px solid black; padding:35px; background-image:url('fondo.jpg'); background-repeat:no-repeat; background-position:left; } #origenborde { background-origin:border-box; } #origenpadding { background-origin:padding-box; } #origencontenido { background-origin:content-box; } </style> <div id="origencontenido">Contenido</div> <div id="origenpadding">Padding</div> <div id="origenborde">Borde</div>
background-size
Nos permite definir el tamaño de la imagen de fondo.
background-size: longitud | porcentaje | auto {1,2} | cover | contain
Con el valor contain la imagen se dimensiona horizonal y/o verticalmente hasta que uno de los dos cubre todo el fondo. Con el valor cover se dimensiona horizontal y verticalmente hasta que se cubre totalmente el fondo. Tanto con contain como con cover se dimensiona la imagen proporcionalmente. El fondo puede tener un valor de longitud o porcentaje o auto, que hará referencia a la longitud horizontal y vertical de la imagen de fondo. Además podemos tener dos valores de longitud, porcentaje o auto o una combinación. El valor auto es el valor por defecto y su valor corresponde con el tamaño original de la imagen.
Ejemplo:
<div style="margin: 1px; outline: blue solid 1px; width: 150px; height: 200px; padding: 0.7em; border: rgba(255,0,0,0.25) solid 0.7em; background-size: contain; background-repeat: no-repeat; background-image: url(fondo.gif);">Capa con contain</div>
Ejemplo:
Ejemplo cover.
<div style="margin: 1px; outline: blue solid 1px; width: 150px; height: 200px; padding: 0.7em; border: rgba(255,0,0,0.25) solid 0.7em; background-size: contain; background-repeat: no-repeat; background-image: url(fondo.gif);">Capa con contain</div>
Ejemplos:
background-size: auto; background-size: 200px; background-size: 200px 100px; background-size: 200px 100px, 400px 200px; background-size: auto 200px; background-size: 50% 25%; background-size: 50% 125; background-size: contain; background-size: cover;
background
La propiedad abreviada fondo se suma a las propiedades de tamaño y origen. Podemos tener varios grupos separados por comas que representan cada una de las imágenes de fondo. Esta es la sintaxis:
background: [, ]* = || [ / ]? || || || {1,2} = || [ / ]? || || || {1,2} ||
Nota: background-color está únicamente permitida en la última capa.
<div style="width: 20em; padding: 1em; border: lime solid 1em; background-color: yellow; background-image: url(fondo.gif); background-repeat: repeat-y; background-attachment: fixed; background-position: 10%; background-size: 2em 1em; background-origin: border-box; background-clip: content-box;">...</div>
Es equivalente a
<div style="width: 20em; padding: 1em; border: lime solid 1em; background: yellow url(fondo.gif) repeat-y fixed 10% / 2em 1em border-box content-box;">...</div>Ejemplo:
<div style="width: 20em; padding: 1em; border: lime solid 1em; background: url(fondo1.gif) repeat-y fixed 10% / 2em 1em border-box content-box, yellow url(fondo2.gif) repeat-y fixed 10% / 2em 1em border-box content-box;">...</div>