CSS
Básico
CSS HomeCSS Introducción
CSS Sintaxis
CSS Su uso
CSS Fondo
CSS Texto
CSS Fuente
CSS Bordes
CSS Contorno
CSS Margen
CSS Padding
CSS Lista
CSS Tablas
Avanzado
CSS DimensionesCSS Efectos Visuales
CSS Ubicación
CSS Contenido/Numerac.
CSS Pseudo Class
CSS Pseudo Element
CSS Tipos de Medios
Ejemplos y Examen
CSS EjemplosCSS Examen
Guías de referencia
CSS Guía de ReferenciaCSS Colores
CSS Código de Colores
CSS Background - Fondo
Decora el fondo de pantalla de tu sitio con colores o imágenes.
El fondo con CSS
Las propiedades de fondo(en inglés background) en CSS, nos permiten controlar el color de fondo de un elemento.
Colocar 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.
Por ejemplo, si quisieramos un fondo de color rojo:
<html>
<head>
<style type="text/css">
body{background:red}
</style>
</head>
<body>
<p>El fondo es de color rojo.</p>
</body>
</html>
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:
<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>
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 
este sería el resultado:
<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>
La imagen se repite hasta cubrir todo el fondo
Propiedades del fondo
| Propiedad | Descripción | Valores | Detalles | Ej. |
|---|---|---|---|---|
| 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 | |
| transparent | Transparente | |
||
| background-image | Imagen de fondo. | URL | Dirección URL | |
| 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 | |
| fixed | Fija | |
||
| background-position | Posición de la imagen de fondo. | % | Porcentaje | |
| longitud | Longitud | |
||
| left | Izquierda | |
||
| center | Centro | |
||
| right | Derecha | |
||
| top | Superior | |
||
| bottom | Inferior | |
¿No encuentras lo que buscas?
<<< Uso de los Estilos Textos - Text en CSS >>>
Los mejores 10 hostings
Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo...
Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.
Copyright 2007 - 2011 by Martín Solomiak. Todos los derechos reservados.
Mapa del sitio
