Explicando os básicos: fundos

Bom dia, leitores por-enquanto-quase-inexistentes >.< No post de hoje darei continuidade à sequência de posts onde explico com todos os pormenores os básicos de HTML, dando noções de várias formas de aplicar, explicando como cada parte do código varia e tudo o mais. Já falei de bordas coloridas - referindo também no mesmo post os cantos arredondados e a outline, porque considero espécies de bordinhas. Hoje falarei de algo que também acho importantíssimo, que são os fundos - ou background. Interessados?

Personalizando o fundo de várias maneiras:

Cor sólida:

• Base do código»      background: #color;
• Background»    Essa palavra indica a quê que a linha se refere, neste caso, ao background - para o caso de alguém não saber, significa fundo em inglês. Nunca usei, mas já vi pessoas a usarem para cores sólidas "background-color", então suponho que também funcione. www
• #color» Vá a uma tabela de cores, e substitua pela cor que quiser. Já disse no post anterior que há 3 maneiras de representar cores, e todas funcionam:  por nome» DodgerBlue; por código Java» rgb(30 144 255); por código HTML (mais comum)» #1E90FF. Isso é a mesma cor. 
• Nunca se esqueça do sinal de pontuação no fim (;)

Imagem:

• Base do código»      background: url(LINKDAIMAGEM) repeat;
• Background» Ok, a primeira palavra indica o que é. Se quiser com imagem, tem de dizer apenas "background", e nunca "background-color". www
• url(LINKDAIMAGEM)» Aí, você vai substituir a parte que diz link da imagem pela url da sua. Como sabe? Pode hospedar num site de imagens, ou de forma mais fácil: insere a imagem na postagem, e copia a url clicando nela com o lado direito do rato. Cuidado para não apagar os parênteses! Ah, e há quem coloque o link da imagem entre aspas, dentro dos parênteses, mas não fazem diferença. 
• Repeat» Se você quiser ocupar uma área grande, e a imagem não for um png, vai querer que se repita, então deixe como está. Se não quiser que se repita, então troque "repeat" por "no-repeat". www
• Nunca se esqueça do sinal de pontuação no fim (;)

Com graduação de cores:

• Base do código»   background: -webkit-gradient(linear, lugar1,lugar2, from(#cor1 ), to(#cor2)) 
• A parte do background já foi mais que explicada.
• Lugar 1 e lugar 2 - zona onde começa o gradiente (1) e onde acaba (2). Indico para lugar 1, left top, e para lugar 2, left bottom, que dará uma graduação vertical. Mas vá experimentando e vendo o que lhe agrada.
• Relembro que: left»esquerda; right»direita; top»topo; bottom»baixo;
• #cor1 e #cor2 - cor que começa o gradiente (1) e cor que termina (2). Vá buscar o código a uma tabela de cores normal.
• Nunca se esqueça do sinal de pontuação no fim (;)  

Com imagem/minigif e cor:

• Base do código»      background: #cccccc url(LINKDAIMAGEM) no-repeat;
• Tudo o que eu disse para as imagens é válido para a parte do código que começa em "url", e a parte da cor, que vem antes, já expliquei acima. 
• O efeito será semelhante a ver uma imagem sobreposta a uma cor. Faça a combinação que quiser.
• Se quiser que o mini-gif ou o que for se repita horizontalmente, escreva, em vez de repeat, "repeat-X". Se quiser que se repita na vertical, use "repeat-Y". www
• Nunca se esqueça do sinal de pontuação no fim (;)

Ok, está bem explicadinho? Acontece que você provavelmente não quer só mudar o fundo, pois não será ajustado na perfeição. Para ajustar, você precisaria de editar coisas como a margin e o padding, mas só o irei ensinar noutro post, por ser bastante complicado. Até já ;)