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

19-02-2014 - Andrés Cruz

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

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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

Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!