Fondos con CSS

Name: Fondos con CSS
Brand: Jose Aguilar
SKU: joseaguilarblog-1953
Availability: InStock
Rating: 5 (1 reviews)

Las propiedades de fondo (en inglés background) en CSS, nos permiten controlar el color de fondo o parte trasera de un elemento.

Establecer un color o una imagen de fondo, la ubicación de la misma dentro del fondo (centrada, a la izquierda, en alguna coordenada de x,y, etc.) y la cantidad de veces que se va a repetir son algunas de las muchas propiedades que se pueden aplicar a los fondos con CSS.

En el ejemplo en funcionamiento te lo estaré ilustrando trabajando con el elemento <body> pero la propiedad fondo las puedes aplicar sobre cualquier elemento de la página.

Color de fondo

Si lo que deseas es aplicar un color de fondo a un elemento tan solo tienes que aplicarlo así:

Source code

body {
    background-color: red;
}

En este caso, le aplico un color rojo haciendo uso de los colores preestablecidos.

Si quisieras dar un color de fondo más personalizado, deberás usar los colores en formato hexadecimal, como por ejemplo:

Source code

body {
    background-color: #e85131;
}

De esta forma, puedes aplicar un color o tono rojo más exacto al que necesitas.

También se puede aplicar un color de fondo usando el código RGB de la siguiente forma:

Source code

body {
    background-color:rgb(255, 0, 0);
}

Para indicar que el cuerpo de la página tendrá un color rojo también.

Imagen de fondo

A los elementos también se le puede establecer una imagen de fondo.

En este caso, lo podemos hacer así:

Source code

body {
    background-image: url('../images/fondo.jpg');
}

En Google puedes buscar las palabras clave «pattern background» y puedes encontrar miles de fondos que puedes usar para tus páginas webs.

También se que existen páginas que te ofrecen bancos de imágenes en las que puedes encontrar fondos muy interesantes.

Propiedades para el 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
background-size	Tamaño de la imagen de fondo.	%	Porcentaje
		px	Pixels