Esta propiedad es la forma abreviada para establecer las demás propiedades relacionadas incluyendo aquellas relacionadas con el color e imagenes de fondo de un elemento; es decir, aquellas cuyo prefijo es background-.
Background-color
Con esta propiedad se indica el color de fondo de algún elemento; Aquí tenemos tres opciones:
- Por su nombre en inglés (green, black, blue, ect)
- En la escala RGB.
- O usando una escala hexadecimal #000000, #111111, ect.
Ejemplos
#background-color1
{
background-color: #C0C0C0;
}
#background-color2
{
background-color: rgb(192,192,192);
}
Background-image
Esta propiedad sirve para colocar una imagen de fondo a un elemento.
#background-image1
{
background-image: url('/public/images/logo.png');
}
background-repeat
Permite indicar si la imagen (establecida con la propiedad anterior) se repita en el eje de las “y”, (repeat-y) de las “x”, (repeat-x) ambos ejes (repeat) o en ningún eje (no-repeat).
Ejemplos
#background-image2
{
background-image: url('/public/images/logo.png');
background-repeat: repeat-x;
border: 1px solid #000000;
}
Solo se repite la imagen en el eje de las "x".
#background-image3
{
background-image: url('/public/images/logo.png');
background-repeat: repeat-y;
border: 1px solid #000000;
}
Solo se repetirá la imagen en el eje de las "y".
#background-image4
{
background-image: url('/public/images/logo.png');
background-repeat: repeat;
border: 1px solid #000000;
}
Se repetirá la imagen en el eje de las "x" y "y".
#background-image5
{
background-image: url('/public/images/logo.png');
background-repeat: no-repeat;
border: 1px solid #000000;
}
No se repetirá la imagen ni en el eje de las "x" ni las "y".
background-position:
Con esta propiedad indicas la posición de un background-image, requiere dos valores dados en porcentajes (50% 20%...), pixeles (20px, 40px…) u con su nombre (center, top, right, left, bottom), puedes confinarlas.
#background-position1
{
background-image: url('/public/images/logo.png');
background-repeat: no-repeat;
background-position: 50% top;
border: 1px solid #000000;
}
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter