FONDOS CSS

“La diferencia entre un esclavo y un

ciudadano es que el ciudadano puede
preguntarse por su vida y cambiarla”.

Alejandro Gándara, escritor.

FONDOS

Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los
elementos.

El color de fondo de una página se establece así:

body 
{

  background-color: lightblue;
}
IMPLEMENTA:

Crea página llamada fondos e implementa :

Color de fondo con Css
 IMAGEN DE FONDO

La background-image propiedad especifica una imagen para usar como

fondo de un elemento.

De forma predeterminada, la imagen se repite para que cubra todo el

elemento.

Ejemplo:
body {
  background-image: url("paper.gif");
}
IMPLEMENTA:

Descarga una imagen o reutiliza la que tengas :

Agregar como fondo esa imagen de la página llamada fondos que
usaste en la implementación anterior.
IMAGEN DE FONDO

Nota: cuando utilice una imagen de fondo, utilice una imagen que no

interfiera con el texto.

Si la imagen de fondo es más grande que el sitio disponible para

mostrarla, el navegador sólo muestra la parte visible que resulta de
colocar la esquina superior izquierda de la imagen en la esquina
superior izquierda del espacio que ocupa el elemento.
IMAGEN DE FONDO
Por el contrario, si la imagen es más pequeña que el sitio disponible, el navegador
repite la misma imagen en todas las direcciones hasta cubrir completamente el
espacio que ocupa el elemento.

Sobre un mismo elemento se puede establecer de forma simultánea una imagen de

fondo y un color de fondo. Este comportamiento es habitual en algunos elementos,
como por ejemplo el fondo de la propia página web.

Si un mismo elemento tiene definida una imagen y un color de fondo, la imagen

tiene prioridad. El color de fondo se muestra en las zonas transparentes de la
imagen y en las zonas que no están cubiertas por la imagen.
IMAGEN DE FONDO

Es posible modificar opciones como si la imagen se repite o no (background-

repeat), si la imagen permanece fija o no (background-attachment) y modificar su
posición por defecto (background-position).

Por último, no se pueden establecer dos o más imágenes diferentes sobre un mismo
elemento. Si se quieren mostrar dos imágenes diferentes como fondo de una página
web, se puede establecer la primera imagen sobre el selector html y la segunda
imagen sobre el selector body .
IMPLEMENTA LAS SIGTES PROPIEDADES EN CSS EN UNA
PÁGINA LLAMADA PRACTICA-FONDOS:

1. background-color
2. background-image
3. background-position
4. background-repeat
5. background-size
6. background-attachment
7. background-clip

Nota: Deben comentar todo el código, tomar capturas y enviar al grupo nuestro de whatsapp.