div {
  background: #466368;
  background: radial-gradient(#648880, #293f50);
}

ADICIONANDO UMA COR DE FUNDO

As with other color values, we can pick from keywords, hexadecimal codes, and RGB, RGBa, HSL, and HSLa values.

div {
	background-color: #b2b2b2;
}

ADICIONANDO UMA IMAGEM DE FUNDO

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.

POSICIONANDO

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;
}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/58ad4c2a-194a-4026-8d31-09dbfc612b39/Untitled.png

Background images são posicionadas no canto superior esquerdo do objeto.

DESIGNING GRADIENT BACKGROUNDS