CSS3 Fondo

Fondos CSS3

CSS3 incluye varias propiedades de fondo nuevas que proporcionan un mayor control sobre los elementos de fondo.

En este capítulo aprenderá las siguientes propiedades de fondo:

  • background-image
  • background-size
  • background-origin
  • background-clip

También aprenderá a utilizar múltiples imágenes de fondo.

Soporte de navegadores

Los números en la tabla indican la primera versión del navegador que admite la propiedad.

Los números seguidos de -webkit-, -ms- o -moz- indican la primera versión del navegador que admite la propiedad con ese prefijo.

Propiedad
background-image
(with multiple backgrounds)		 4.0 9.0 3.6 3.1 11.5
background-size 4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-
background-origin 1.0 9.0 4.0 3.0 10.5
background-clip 4.0 9.0 4.0 3.0 10.5

Propiedad background-image de CSS3

En CSS3, puede agregar imágenes de fondo mediante la propiedad background-image.

Las diferentes imágenes de fondo se separan con comas, y la primera imagen es la que se muestra en la parte superior.

Ejemplo

#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }

Pruébelo »

Se pueden establecer múltiples propiedades diferentes para distintas imágenes.

Ejemplo

#example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }

Pruébelo »

Propiedad background-size de CSS3

background-size especifica el tamaño de la imagen de fondo. Antes de CSS3, el tamaño de la imagen de fondo estaba determinado por el tamaño real de la imagen.

En CSS3, puede especificar la imagen de fondo y redimensionarla en diferentes contextos. Puede indicar el tamaño en píxeles o en porcentaje.

El tamaño que especifique es un porcentaje relativo al ancho y alto del elemento padre.

OperaSafariChromeFirefoxInternet Explorer

Ejemplo 1

Restablecer la imagen de fondo:

div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; }

Pruébelo »

OperaSafariChromeFirefoxInternet Explorer

Ejemplo 2

Estirar la imagen de fondo para que rellene completamente el área de contenido:

div { background:url(img_flwr.gif); background-size:100% 100%; background-repeat:no-repeat; }

Pruébelo »

La propiedad background-origin de CSS3

La propiedad background-origin especifica el área de posicionamiento de la imagen de fondo.

La imagen de fondo puede colocarse en las áreas content-box, padding-box y border-box.



OperaSafariChromeFirefoxInternet Explorer

Ejemplo

Posicionar la imagen de fondo en content-box:

div { background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; background-origin:content-box; }

Pruébelo »

Múltiples imágenes de fondo en CSS3

CSS3 permite agregar múltiples imágenes de fondo a un elemento.
OperaSafariChromeFirefoxInternet Explorer

Ejemplo

Configurar dos imágenes de fondo en el elemento body:

body { background-image:url(img_flwr.gif),url(img_tree.gif); }

Pruébelo »

Propiedad background-clip de CSS3

En CSS3, la propiedad de recorte de fondo background-clip comienza a dibujar desde la posición especificada.

Ejemplo

#example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box; }

Pruébelo »

Nuevas propiedades de fondo

Orden Descripción CSS
background-clip Especifica el área de dibujo del fondo. 3
background-origin Especifica el área de posicionamiento de la imagen de fondo. 3
background-size Especifica el tamaño de la imagen de fondo. 3
Otras extensiones