Práctica 7

La propiedad CSS background-attachment determina si la posición de la imagen se fija en la ventana, o se desplaza junto con su bloque de contenido.

Sintaxis:

	background-attachment: scroll | fixed | local

Valor inicial:

	scroll

fixed

El fondo se fija con respecto a la ventana. Incluso si un elemento tiene un mecanismo de desplazamiento, un fondo 'fixed' no se mueve con el elemento.

local

El fondo se fija en relación con los contenidos del elemento.

scroll

El fondo está fijo con respecto al elemento de sí mismo y no se desplaza con su contenido. (Se adjunta con eficacia a la frontera del elemento).

La propiedad CSS background-clip especifica si el fondo de un elemento, ya sea color o imagen, se extiende por debajo de su frontera.

Sintaxis:

	background-clip: border-box | padding-box | content-box

Valor inicial:

	border-box

border-box

El fondo se extiende hasta el borde exterior de la frontera.

padding-box

El fondo se extiende hasta el borde exterior del relleno.

content-box

El fondo se extiende en el cuadro de contenido.

La propiedad CSS background-color establece el color de fondo de un elemento, ya sea a través de un valor de color o la palabra clave transparent.

Sintaxis:

	background-color: rgb() | rgba() | hsl() | hsla() | hex-color | named-color | currentcolor | deprecated-system-color

Valor inicial:

	transparent

rgb()

background-color: rgb(59, 89, 152)

rgba()

background-color: rgba(59, 89, 152, 0.5)

hsl()

background-color: hsl(221, 44%, 41%)

hsla()

background-color: hsla(221, 44%, 41%, 0.5)

hex-color

background-color: #3B5998

named-color

background-color: Gainsboro

gradiente radial

-moz-radial-gradient(50% 50%, #3B5998, #FFFFFF)
-webkit-radial-gradient(50% 50%, #3B5998, #FFFFFF)
-o-radial-gradient(50% 50%, #3B5998, #FFFFFF)

gradiente lineal

-moz-linear-gradient(top, #3B5998, #FFFFFF)
-webkit-linear-gradient(top, #3B5998, #FFFFFF)
-o-linear-gradient(top, #3B5998, #FFFFFF)

La propiedad CSS background-image establece una o varias imágenes de fondo de un elemento. Las imágenes se dibujan en capas de contexto. La primera capa especificada se dibuja como si estuviera más cerca del usuario.

Por defecto, el background-image se coloca en la esquina superior izquierda de un elemento, y repetido tanto vertical como horizontalmente.

Sintaxis:

	background-image: url | none

Valor inicial:

	none

url('URL')

La URL de la imagen. Para especificar más de una imagen, separe las direcciones URL con una coma.

none

Es una palabra clave que indica la ausencia de imágenes.

La propiedad CSS background-origin determina la posición del área del fondo, que es la posición de el origen de la imagen especificada por background-image.

Sintaxis:

	background-origin: border-box | padding-box | content-box

Valor inicial:

	padding-box

border-box

El origen del fondo esta en el limite exterior del borde.

padding-box

El origen del fondo está en limite exterior del padding, es decir no tiene en cuenta el padding.

content-box

El origen del fondo está en el contenedor.

La propiedad CSS background-position establece la posición inicial del fondo, en relación con la capa que lo contiene.

Sintaxis:

	background-position: center | bottom | top | left | right | percentage

Valor inicial:

	0% 0%

center

Muestra el fondo centrado respecto al contenedor.

bottom

Muestra en la parte inferior y centrado respecto al contenedor.

top

Muestra en la parte superior y centrado respecto al contenedor.

left

Muestra en la parte izquierda y centrado respecto al contenedor.

right

Muestra en la parte derecha y centrado respecto al contenedor.

top right

Muestra en la parte superior derecha.

percentage

Muestra en el eje x y el eje y en función del porcentaje indicado.

background-position: 25% 75%

medida

Muestra en el eje x y el eje y en función de la medida indicada.

background-position: 3em 100px

La propiedad CSS background-repeat define cómo se repiten las imágenes de fondo. Una imagen de fondo puede repetirse a lo largo del eje horizontal, el eje vertical, ambos ejes, o no repetirse en absoluto. Por defecto, las imágenes repetidas se recortan al tamaño del elemento, pero se pueden escalar para adaptarse (usando round) o uniformemente distribuidos de extremo a extremo (con space).

Sintaxis:

	background-repeat: repeat | no-repeat | repeat-x | repeat-y

Valor inicial:

	repeat

no-repeat

No repite el fondo.

repeat

Repite el fondo hasta ocupar el elemento contenedor.

repeat-x

Repite el fondo hasta ocupar el elemento que lo contiene solo en el eje x.

repeat-y

Repite el fondo hasta ocupar el elemento que lo contiene solo en el eje y.

La propiedad CSS background-size especifica el tamaño de la imagen de fondo.

Sintaxis:

	background-size: length | percentage | auto | cover | contain

Valor inicial:

	auto auto

length

Establece el tamaño de la imagen en función de la medida.

background-size: 7em background-size: 7em 4em background-size: 70px background-size: 70px 200px

percentage

Establece el tamaño de la imagen en función del porcentaje.

background-size: 50% background-size: 50% 10%

auto

Mantiene la relación de aspecto de la imagen.

background-size: 30%, auto

contain

Ocupa todo el espacio posible del contenedor sin recortar la imagen.

cover

Ocupa todo el espacio posible del contenedor recortando la imagen.