Sea protagonista de la Web

CSS Fondo

El fondo con CSS

Las propiedades de fondo en CSS, nos permiten controlar el color de fondo de un elemento, una imagen de fondo, su ubicación, cuantas veces se repite, etc.

Por ejemplo, si quisieramos un fondo de color rojo:

Código

<html>
<head>
 <style type="text/css">
  body{background:red}
 </style>
</head>

<body>
 <p>El fondo es de color rojo.</p>
</body>
</html>

Resultado

El fondo es de color rojo

En caso que optemos por una imagen como fondo de nuestra página esta sería una solución:

Código

<html>
<head>
 <style type="text/css">
  body{background-image:url('fondo3.jpg')}
 </style>
</head>

<body>
 <p>Ejemplo de una imagen de fondo</p>
</body>
</html>

Resultado

Ejemplo de una imagen de fondo

¿Qué pasa si la imagen es más pequeña que el tamaño del fondo?

Si la imagen que elegimos de fondo es más chica que este, esta se repetirá tantas veces como sea necesario hasta cubrir todo el fondo.
Por ejemplo para una imagen como esta Fondo 4 este sería el resultado:

Código

<html>
<head>
 <style type="text/css">
  body{background-image:url('fondo4.jpg')}
 </style>
</head>

<body>
 <p>La imagen se repite hasta cubrir todo el fondo</p>
</body>
</html>

Resultado

La imagen se repite hasta cubrir todo el fondo

Propiedades del fondo

Propiedad	Descripción	Valores	Detalles
background	Propiedades individuales relacionadas con el fondo.	background-color	Color de fondo
		background-image	Imagen de fondo
		background-repeat	Repetición del fondo
		background-attachment	Acoplamiento del fondo
		background-position	Posición del fondo
background-color	Color de fondo.	color	Color
background-color	Color de fondo.	transparent	Transparente
background-image	Imagen de fondo.	URL	Dirección URL
background-image	Imagen de fondo.	none	Nada
background-repeat	Repetición de la imagen de fondo.	repeat	Repite
		repeat-x	Repite horizontalmente
		repeat-y	Repite verticalmente
		no-repeat	No se repite
background-attachment	Desplazamiento de la imagen de fondo.	scroll	Desplaza
background-attachment	Desplazamiento de la imagen de fondo.	fixed	Fija
background-position	Posición de la imagen de fondo.	%	Porcentaje
		longitud	Longitud
		left	Izquierda
		center	Centro
		right	Derecha
		top	Superior
		bottom	Inferior