DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
19-02-2014

Esta propiedad es la forma abreviada para establecer las demás propiedades relacionadas incluyendo aquellas relacionadas con el color e imagenes de fondo de un elemento; es decir, aquellas cuyo prefijo es background-.

Background-color

Con esta propiedad se indica el color de fondo de algún elemento; Aquí tenemos tres opciones:

CSS Colors

Ejemplos

	#background-color1
	{
		background-color: #C0C0C0;
	}
  
	#background-color2
	{
		background-color: rgb(192,192,192);
	}
  

Background-image

Esta propiedad sirve para colocar una imagen de fondo a un elemento.

	#background-image1
	{
		background-image: url('/public/images/logo.png');
	}
  

background-repeat

Permite indicar si la imagen (establecida con la propiedad anterior) se repita en el eje de las “y”, (repeat-y) de las “x”, (repeat-x) ambos ejes (repeat) o en ningún eje (no-repeat).

Ejemplos

#background-image2
{
	background-image: url('/public/images/logo.png');
	background-repeat: repeat-x;
	border: 1px solid #000000;
}
  

Solo se repite la imagen en el eje de las "x".

	#background-image3
	{
		background-image: url('/public/images/logo.png');
		background-repeat: repeat-y;
		border: 1px solid #000000;
	}
  

Solo se repetirá la imagen en el eje de las "y".

	#background-image4
	{
		background-image: url('/public/images/logo.png');
		background-repeat: repeat;
		border: 1px solid #000000;
	}
  

Se repetirá la imagen en el eje de las "x" y "y".

	#background-image5
	{
		background-image: url('/public/images/logo.png');
		background-repeat: no-repeat;
		border: 1px solid #000000;
	}
  

No se repetirá la imagen ni en el eje de las "x" ni las "y".

background-position:

Con esta propiedad indicas la posición de un background-image, requiere dos valores dados en porcentajes (50% 20%...), pixeles (20px, 40px…) u con su nombre (center, top, right, left, bottom), puedes confinarlas.


	#background-position1
	{
		background-image: url('/public/images/logo.png');
		background-repeat: no-repeat;
		background-position: 50% top;
		border: 1px solid #000000;
	}
  

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Calendario de cubo

Calendario de cubo

Pulpo animado con solo CSS

Pulpo animado con solo CSS

Csspin: spinners y loaders con solo CSS

Csspin:  spinners y loaders con solo CSS

Algunos artículos que te pueden interesar

El uso de la función step en las animaciones y transiciones en CSS

El uso de la función step en las animaciones y transiciones en CSS

La función steps() permite controlar el movimiento de las animaciones indicando el número de "frame" o saltos que queremos que conste una animación o transición.

Andrés Cruz 16-03-2015

Animando letras con animation-delay en CSS

Animando letras con animation-delay en CSS

Se explica cómo crear una sencilla animación de letras empleando la propiedad animation-delay en CSS.

Andrés Cruz 18-08-2016

Creando reflejos en nuestras imágenes con webkit-box-reflect

Creando reflejos en nuestras imágenes con webkit-box-reflect

Se explica cómo crear un reflejo de una imagen con la propiedad webkit-box-reflect, además de su sintaxis básica que permite cambiar la posición, desplazamiento y hasta la posibilidad de aplicar máscaras para crear reflejos

Andrés Cruz 05-07-2016