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

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Árbol arcoíris creciente

Árbol arcoíris creciente

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Algunos artículos que te pueden interesar

Uso de cursores con CSS

Uso de cursores con CSS

Con la propiedad cursor que veremos a continuación podemos cambiar el aspecto del cursor sobre ciertos elementos en nuestra web.

Andrés Cruz 22-08-2013

Animando cosas con CSS: Creando una luna

Animando cosas con CSS: Creando una luna

En esta entrada veremos cómo crear una Luna la cual estará compuesta por su halo, cráteres, fases y un cielo estrellado.

Andrés Cruz 29-10-2015

Efectos CSS con Google Font Effects

Efectos CSS con Google Font Effects

Como su nombre indica, la API Google Font permite agregar fuentes; en este artículo explicaremos cómo utilizar las fuente de efecto de Google.

Andrés Cruz 06-02-2014