Mis apuntes de desarrollo web </>

Background-color:

La propiedad Background-color establece el color de fondo de un elemento.

Background: gradient:

Los gradientes consisten en una transición progresiva entre dos o más colores.

Gradiente lineal:

Los degradados lineales cambian de color progresivamente a lo largo de una línea imaginaria. Se generan con la función linear-gradient(). Sus argumentos son:

1. Dirección de la linea de degradado:
   • Palabras clave: Consta de la palabra to y hasta dos palabras clave: una indica el lado horizontal (left o right), y la otra el lado vertical (top o bottom). El orden de las palabras clave secundarias no importa. Si no se especifica, el valor predeterminado es to bottom.
   • Angulos: El ángulo de dirección de la línea de degradado. Los valores to top, to bottom, to left, y to right son equivalentes a los ángulos 0deg, 180deg, 270deg, y 90deg, respectivamente. Los otros valores giran en sentido de las agujas del relog desde 0deg.
2. Color y longitud: El color seguido de una o dos posiciones de parada opcionales (cada una de las cuales es al % o a una medida de longitud largo del eje del degradado).

Gradiente radial:

Los degradados radiales cambian los colores progresivamente desde un punto central (origen). Se generan con la función radial-gradient(). Sus argumentos son:

1. Forma del degradado: El valor puede ser circle o ellipse.
2. Posición del gradiente: interpretada de la misma manera que background-position o transform-origin. Si no se especifica, el valor predeterminado es center.
3. Tamaño: Si se omite, el valor predeterminado es la esquina más lejana. Se puede dar de forma explícita o por palabra clave.
   • closest-side: La forma final del degradado se encuentra con el lado del cuadro más cercano a su centro (para círculos) o con los lados vertical y horizontal más cercanos al centro (para elipses).
   • closest-corner: El tamaño de la forma final del degradado se ajusta de manera que coincida exactamente con la esquina más cercana del cuadro desde su centro.
   • farthest-side: Similar a closest-side, excepto que el tamaño de la forma final se ajusta al lado de la caja más alejado de su centro (o los lados vertical y horizontal).
   • farthest-corner: El valor predeterminado, la forma final del degradado tiene un tamaño tal que coincida exactamente con la esquina más alejada del cuadro desde su centro.
4. Color y longitud.

Gradiente repetitivo:

La repetición de degradados duplica un degradado tanto como sea necesario para rellenar un área determinada. Se generan con las funciones repeating-linear-gradient()y repeating-radial-gradient().

Gradiente cónico:

Los degradados cónicos cambian de color progresivamente alrededor de un círculo. Se generan con la función conic-gradient(). Sus argumentos son:

1. Ángulo: Precedido por from, y tomando un ángulo como su valor, define la rotación del gradiente en el sentido de las agujas del reloj.
2. posición: Con los mismos valores que la propiedad background-position, la posición define el centro del degradado. Si se omite, el valor predeterminado es center, lo que significa que el degradado estará centrado.
3. Color y longitud.

Background-image:

La propiedad Background-image establece una o más imágenes de fondo en un elemento separadas por comas.

Las imágenes de fondo se dibujan apilando capas de contexto una encima de la otra. La primera capa especificada se dibuja como si fuera la más cercana al usuario.

Si no se puede dibujar una imagen especificada (por ejemplo, cuando el archivo indicado por el URI especificado no se puede cargar), los navegadores la manejan como lo harían con un valor none. Por eso es importante que exista un Background-color de respaldo. Este se mostrará en caso de que la imagen no carge o tambien si esta está opaca o posee transparencia.

Background-repeat:

La propiedad Background-repeat establece cómo se repiten las imágenes de fondo. Una imagen de fondo puede repetirse a lo largo de los ejes horizontal y vertical, o no repetirse en absoluto. Por defecto como se ve en los ejemplos anteriores las imagenes se repitenten tanto en x como en y (repeat)

repeat vs space vs round:

• En el caso de repeat la imagen se repite tanto como sea necesario para cubrir toda el área de pintura de la imagen de fondo y la última imagen se recortará si no encaja.
• En el caso de space la imagen se repite tanto como sea posible sin recortar. La primera y la última imagen se fijan a ambos lados del elemento y los espacios en blanco se distribuyen uniformemente entre las imágenes.
• En el caso de round a medida que el espacio permitido aumenta de tamaño, las imágenes repetidas se estirarán (sin dejar espacios) hasta que haya espacio para agregar otra. Cuando se agrega la siguiente imagen, todas las actuales se comprimen para dejar espacio.

Background-position:

La propiedad Background-position establece la posición inicial para cada imagen de fondo.

Valores con palabras clave:

Valores con medidas horizontal y vertical:

Valores con medidas de coordenadas:

Background-size:

La propiedad Background-size establece el tamaño de la imagen de fondo del elemento. La imagen se puede dejar en su tamaño natural, estirar o restringir para que se ajuste al espacio disponible.

Valores con palabras clave:

contain:

Escala la imagen lo más grande posible dentro de su contenedor sin recortar ni estirar la imagen. Si el contenedor es más grande que la imagen, esto dará como resultado un mosaico de la imagen, a menos que el background-repeat esté establecido en no-repeat.

cover:

Escala la imagen lo más grande posible para llenar el contenedor, estirando la imagen si es necesario. Si las proporciones de la imagen difieren del elemento, se recorta vertical u horizontalmente para que no quede ningún espacio vacío.

auto:

Escala la imagen de fondo en la dirección correspondiente de modo que se mantengan sus proporciones intrínsecas.

valores con medidas y %:

Background-attachment:

La propiedad Background-attachment establece si la posición de una imagen de fondo se fija dentro de la ventana gráfica o se desplaza con su bloque contenedor. Admite los siguientes valores:

fixed:

El fondo está fijo en relación con la ventana gráfica. Incluso si un elemento tiene un mecanismo de desplazamiento, el fondo no se mueve con el elemento.

local:

El fondo se fija en relación con el contenido del elemento. Si el elemento tiene un mecanismo de desplazamiento, el fondo se desplaza con el contenido del elemento, y el área de pintura de fondo y el área de posicionamiento del fondo son relativas al área de desplazamiento del elemento en lugar de al borde que los enmarca.

scroll:

El fondo se fija en relación con el elemento en sí y no se desplaza con su contenido.

Background-clip:

La propiedad Background-clip establece si el fondo de un elemento se extiende por debajo de su cuadro de borde, cuadro de relleno o cuadro de contenido. Admite los siguintes valores:

border-box:

El fondo se extiende hasta el borde exterior de la caja (pero debajo del borde en orden z).

padding-box:

El fondo se extiende hasta el borde exterior de la caja. No se dibuja ningún fondo debajo del borde.

content-box:

El fondo está pintado dentro (recortado) de la caja.

text:

El fondo está pintado dentro (recortado) del texto de primer plano.

Fondo de imagen con degradado: