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

Gradientes sobre el texto

Gradientes sobre el texto

Eye Candy

Eye Candy

Loader espiral con CSS

Loader espiral con CSS

Algunos artículos que te pueden interesar

Cómo emplear la cámara y la galería con Phonegap

Cómo emplear la cámara y la galería con Phonegap

Se explica emplear la cámara de un dispositivo con PhoneGap y además cómo seleccionar una foto o imagen que tengamos en nuestro dispositivo empleando la galería con JavaScript.

Andrés Cruz 24-04-2017

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

Formas geométricas con CSS (parte 2)

Formas geométricas con CSS (parte 2)

En esta entrada se explica cómo crear las siguientes figuras geométricas con solo CSS: pentágono, hexágono, octágono.

Andrés Cruz 28-05-2015