UF1303 | Elaboración de hojas de estilo

Fondos

background-color

• F010-background-color.html

Se presenta la propiedad background-color.

Valores expresados mediante nombres
Ejemplo:

div{
    background-color: red;
}

Valor expresado en RGB hexadecimal
Ejemplo:

div{
    background-color: #00ff00;
}

Valor expresado en RGB decimal
Ejemplo:

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

Valor expresado en RGB decimal con canal alfa
Ejemplo:

div{
    background-color: rgba(0, 0, 255, 0.5);
}

Valor expresado en HSL
Ejemplo:

div{
    background-color: hsl(60, 100%, 50%);
}

Valor expresado en HSL con canal alfa
Ejemplo:

div{
    background-color: hsla(60, 100%, 50%, 0.5);
}

Valor expresado con curruenColor
Ejemplo:

div{
    color: cyan;
    background-color: currentColor;
}

background-image y background-repeat

• F020-background-image.html

Se presentan las propiedades background-imagen y background-repeat.

Propiedad background-imagen.
Ejemplo:

div{
    background-image: url("./imagen.jpg");
}

Declaración CSS background-repat: no-repeat;
Ejemplo:

div{
    background-image: url("./imagen.jpg");
    background-repeat: no-repeat;

 /* La imagen no se repite. Si la imagen es más
    pequeña que el contenedor, se puede ver
    el color de fondo.  */
}

Declaración CSS background-repat: repeat-x;
Ejemplo:

div{
    background-image: url("./imagen.jpg");
    background-repeat: repeat-x;
    
 /* La imagen se repite en el eje horizontal. */
}

Declaración CSS background-repat: repeat-y;
Ejemplo:

div{
    background-image: url("./imagen.jpg");
    background-repeat: repeat-y;
    
 /* La imagen se repite en el eje vertical. */
}

Declaración CSS background-repat: repeat;
Ejemplo:

div{
    background-image: url("./imagen.jpg");
    background-repeat: repeat;
    
 /* La imagen se repite en ambos ejes. */
}

Declaración CSS background-repat: round;
Ejemplo:

div{
    background-image: url("./imagen.jpg");
    background-repeat: round;
    
 /* La imagen se repite en ambos ejes hasta cubrir
    toda el área.
    Ninguna de las repeticiones queda recortadas,
    sino que las imágenes se estiran hasta lograr
    cubrir el área del contenedor con el máximo
    de imágenes no recortadas. */
}

Declaración CSS background-repat: space;
Ejemplo:

div{
    background-image: url("./imagen.jpg");
    background-repeat: space;
    
 /* La imagen se repite en ambos ejes hasta cubrir
    toda el área.
    Ninguna de las repeticiones queda recortadas,
    sino que las imágenes se separan hasta lograr
    cubrir el área del contenedor con el máximo
    de imágenes no recortadas. */
}

background-attachment

• F030-background-attachment.html

Se presenta la propiedad background-attachment.

Declaración CSS background-attachment: scroll;
Ejemplo:

div{
    background-image: url("./imagen.jpg");
    background-attachment: scroll;
    
 /* La imagen de fondo se moverá dentro de la pantalla
    junto al bloque que la contiene. Es el valor por
    defecto. */
}

Declaración CSS background-attachment: fixed;
Ejemplo:

div{
    background-image: url("./imagen.jpg");
    background-attachment: fixed;
    
 /* La imagen de fondo estará fija en la pantalla
    y no se moverá con el bloque contenedor. */
}

background-position

• F040-background-position.html

Se presenta la propiedad background-position.

Valores porcentuales
Ejemplo:

.caja-1{
 /* La esquina superior-izquierda de la imagen es
    alineada con la esquina superior-izquierda del
    contenedor */ 
    background-position: 50% 50%;
}

.caja-2{
 /* La esquina inferior-derecha de la imagen es
    alineada con la esquina inferior-derecha del
    contenedor. */ 
    background-position: 0% 0%;            
}

.caja-3{
 /* Con un valor 10% 30%, el punto a 10% a la
    derecha y 30% abajo de la imagen es colocado
    en el punto al 10% derecha y 30% abajo del
    contenedor. */ 
    background-position: 100% 100%;           
}

.caja-4{
 /* La imagen se desplaza dentro del contenedor
    10px a la derecha y 15px hacia abajo. */ 
    background-position: 25% 25%;           
}

Valores de mediciones
Ejemplo:

.caja-1{
 /* La imagen se desplaza dentro del contenedor
    10px a la derecha y 15px hacia abajo. */ 
    background-position: 10px 50px;           
}

.caja-2{
 /* La imagen se desplaza dentro del contenedor
    1rem a la derecha y 4rem hacia abajo. */ 
    background-position: 1rem 4rem;           
}

Palabras clave
Ejemplo:

.caja-1{
 /* El centro de la imagen es alineada con el centro
    del contenedor. */ 
    background-position: 50% 50%;
}

.caja-2{
 /* La esquina superior-izquierda de la imagen es
    alineada con la esquina superior-izquierda del
    contenedor. */  
    background-position: 0% 0%;            
}

.caja-3{
 /* La esquina inferior-derecha de la imagen es
    alineada con la esquina inferior-derecha del
    contenedor. */ 
    background-position: 100% 100%;           
}

.caja-4{
 /* Con un valor 10% 30%, el punto a 10% a la
    derecha y 30% abajo de la imagen es colocado
    en el punto al 10% derecha y 30% abajo del
    contenedor. */  
    background-position: 25% 25%;           
}