div {
background: #466368;
background: radial-gradient(#648880, #293f50);
}
As with other color values, we can pick from keywords, hexadecimal codes, and RGB, RGBa, HSL, and HSLa values.
div {
background-color: #b2b2b2;
}
div {
background-image: url("alert.png");
}
Utilizando somente este trecho, podemos obter resultados inesperados, uma vez que por padrão, a imagem é repetida verticalmente e horizontalmente, preenchendo o elemento que possuia-a como propriedade.
Podemos adicionar então:
div {
background-image: url("alert.png");
background-repeat: no-repeat;
}
A propriedade background-repeat pode receber 4 valores: repeat, repeat-x, repeat-y, and no-repeat.
Podemos ainda posicionar a imagem de forma mais agradável.
Por padrão, a imagem vem posicionada no canto superior esquerdo do elemento.
div {
background-image: url("alert.png");
background-position: 20px 10px;
background-repeat: no-repeat;
}
Background images são posicionadas no canto superior esquerdo do objeto.