Tironemota

▲
CSS

Propiedad CSS fondo
26-07-2022

background 26-07-2022

Es la forma comprimida en la cual podemos definir todos los valores de los fondo de una sola vez.

Sintaxis: Selector { background: valor1 valor2; }

Nota: debemos dejar un espacio en blanco entre los valores.

Posibles valores: color | transparent | URL | none | repeat | repeat-x | repeat-y | no-repeat | fixed | scroll | % | longitud | left | center | right | top | bottom | inherit

Cuando se utiliza la propiedad abreviada el orden de los valores de la propiedad es:

No importa si uno de los valores de la propiedad no se encuentra, siempre y cuando los que están presentes son, por este orden.

background: #FFFFFF 
<div>
    <p>Propiedad background: #FFFFFF</p>
</div>
<style>
div {
    background:  ;
    border-radius:20px;
    outline: 5px solid #333333;
    height: 200px;
    width: 400px;
}
</style>

Propiedad background: #FFFFFF

Arriba ... ⇑

background-attachment 26-07-2022

Nos permite fijar o liberar una imagen de fondo, es decir que al movernos por la página con la barra de desplazamiento, la imagen de fondo quede anclada en el lugar o se desplaze con la misma.

Sintaxis: Selector { background-image: url("nombre-de-la-imagen"); background-attachment: valor; }

Posibles valores:

  • scroll - El fondo se desplaza junto con el elemento. Esto es el predeterminado
  • fixed - El fondo se fija con respecto a la ventana de visualización
  • local - El fondo se desplaza junto con el contenido del elemento
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.
background-attachment: scroll 
<div>
    <p>Propiedad background-attachment: scroll</p>
</div>
<style>
div {
    background-image: url(imagen.jpg);

    background-attachment:  ;
}
</style>

Propiedad
background-attachment: scroll

Arriba ... ⇑

background-blend-mode 26-07-2022

La propiedad background-blend-mode define el modo de fusión de cada capa de fondo (color y / o imagen).

Posibles valores:

  • normal - Esto es el predeterminado. Establece el modo de fusión en normal
  • multiply - Establece el modo de mezcla para multiplicar
  • screen - Establece el modo de fusión en la pantalla
  • overlay - Establece el modo de fusión para superponer
  • darken - Establece el modo de fusión para oscurecer
  • lighten - Establece el modo de fusión para aclarar
  • color-dodge - Ajusta el modo de fusión para el color a evadir
  • saturation - Establece el modo de fusión a saturación
  • color - Ajusta el modo de fusión al color
  • luminosity - Ajusta el modo de fusión a la luminosidad
background-blend-mode: normal 
<div>
    <h2>Propiedad background-blend-mode: normal</h2>
    <div id="Mydiv">Texto</div>
</div>
<style>
#Mydiv {
    width: 200px;
    height: 200px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, black 0%,white 100%), url('IMAGEN');
    background-blend-mode:  ;
    margin: auto;
}
</style>

Propiedad background-blend-mode: normal

Colocar aquí el contenido que desee. Colocar aquí el contenido que desee. Colocar aquí el contenido que desee. Colocar aquí el contenido que desee. Colocar aquí el contenido que desee. Colocar aquí el contenido que desee.
Arriba ... ⇑

background-clip 26-07-2022

Especifica el área de pintura del fondo.

Posibles valores:

  • border-box - Valor por defecto. El fondo se acorta al cuadro de borde
  • padding-box - El fondo se acorta al cuadro de relleno
  • content-box - El fondo se acorta al cuadro de contenido
  • initial - Establece esta propiedad a su valor predeterminado
  • inherit - Hereda esta propiedad de su elemento padre
background-clip: border-box 
<div>
    <h2>Propiedad background-clip: border-box</h2>
    <div id="Mydiv">Texto</div>
</div>
<style>
#Mydiv {
    width: 200px;
    padding: 25px;
    border: 10px dotted #000000;
    background-color: yellow;

    background-clip:  ;
    margin: 10px auto;
}
</style>

Propiedad background-clip: border-box

Colocar aquí el contenido que desee. Colocar aquí el contenido que desee. Colocar aquí el contenido que desee. Colocar aquí el contenido que desee. Colocar aquí el contenido que desee.
Arriba ... ⇑

background-color 26-07-2022

Especifica el color de fondo del elemento.

Sintaxis: Selector { background-color: valor }

Posibles valores: color | transparent | inherit

background-color: #FFFFFF 
<div>
    <h2>Propiedad background-color: #FFFFFF</h2>
</div>
<style>
div {

    background-color:  ;
}
</style>

Propiedad background-color: #FFFFFF

Arriba ... ⇑

background-image 26-07-2022

Inserta una imagen como fondo del elemento.

Sintaxis: Selector { background-image: url("URL-DE-IMAGEN"); }

Posibles valores: URL | none | inherit

background-image: none 
<div>
    <h2>background-image: none</h2>
</div>
<style>

div {
    background-image:  ;
}
</style>

background-image: none

Arriba ... ⇑

background-origin 26-07-2022

Especifica dónde se coloca(n) la(s) imagen(s) de fondo.

Posibles valores:

  • padding-box - Valor por defecto. La imagen de fondo comienza desde la esquina superior izquierda del borde de relleno.
  • border-box - La imagen de fondo comienza desde la esquina superior izquierda del borde.
  • content-box - La imagen de fondo comienza en la esquina superior izquierda del contenido.
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.
background-origin: padding-box 
<div>
    <h2>Propiedad background-origin: padding-box</h2>
    <div id="Mydiv">Texto</div>
</div>
<style>
#Mydiv {
    width: 200px;
    padding: 25px;
    border: 10px dotted #000000;
    margin: 10px auto;
    background-image:url('IMAGEN');
    background-repeat:no-repeat;
    background-origin:  ;
}
</style>

Propiedad background-origin: padding-box

Colocar aquí el contenido que desee. Colocar aquí el contenido que desee. Colocar aquí el contenido que desee. Colocar aquí el contenido que desee.
Arriba ... ⇑

background-position 26-07-2022

Nos permite ubicar una imagen en un lugar específico dentro del fondo.

Sintaxis: Selector { background-image: url(URL-DE-IMAGEN); background-position: valor ; }

Posibles valores: % | coordenadas x-y | left | center | right | top | bottom | inherit

background-position: left top 
<div>
    <h2>Propiedad background-position: left top</h2>
</div>
<style>
div {
    background-color: #FFF;
    background-image: url(URL-DE-IMAGEN);
    background-repeat: no-repeat;
    background-position:  ;
    height: 300px;
    width: 300px;
}
</style>

Propiedad background-position: left top

Arriba ... ⇑

background-repeat 26-07-2022

Si la imagen que elegimos de fondo es más pequeña que este, podemos repetir la imagen horizontalmente o verticalmente hasta cubrir todo el fondo.

Sintaxis: Selector { background-image: url(URL-DE-IMAGEN); background-repeat: valor; }

Posibles valores: repeat | repeat-x | repeat-y | no-repeat | inherit

background-repeat: repeat 
<div>
    <h2>Propiedad background-repeat: repeat</h2>
</div>
<style>
div {
    background-image: url(URL-DE-IMAGEN);
    background-position: 50% 50%;

    background-repeat:  ;
}
</style>

Propiedad
background-repeat:
repeat

Arriba ... ⇑

background-size 26-07-2022

Especifica el tamaño de la(s) imagen(s) de fondo.

Posibles valores:

  • auto - Valor por defecto. La imagen de fondo contiene su ancho y altura.
  • length - Establece el ancho y la altura de la imagen de fondo. El primer valor fija el ancho, el segundo valor fija la altura. Si sólo se da un valor, el segundo se establece en "auto".
  • percentage - Establece el ancho y la altura de la imagen de fondo en porcentaje del elemento padre. El primer valor fija el ancho, el segundo valor fija la altura. Si sólo se da un valor, el segundo se establece en "auto".
  • cover - Escale la imagen de fondo para que sea lo más grande posible para que el área de fondo esté completamente cubierta por la imagen de fondo. Es posible que algunas partes de la imagen de fondo no estén a la vista dentro del área de posicionamiento de fondo.
  • contain - Escale la imagen al tamaño más grande de tal manera que tanto su ancho como su altura puedan caber dentro del área de contenido.
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.
background-size: auto 
<div>
    <h2>Propiedad background-size: auto</h2>
    <div id="Mydiv">Texto</div>
</div>
<style>
#Mydiv {
    width: 200px;
    height: 150px;
    border: 5px solid #333;
    background-image:url(URL-DE-IMAGEN);
    background-repeat:no-repeat;
    background-size:  ;
}
</style>

Propiedad background-size: auto

Arriba ... ⇑