Guía rápida sobre el background en CSS (parte 1)

19-02-2014 - Andrés Cruz

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:

Por su nombre en inglés (green, black, blue, ect)
En la escala RGB.
O usando una escala hexadecimal #000000, #111111, ect.

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;
	}

Fondo HTML

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy