Como apresentarei os conceitos

Como existe muitos conceitos a serem levados em conta vou explicar esses conceitos por partes, sequencialmente por simplicidade e importância.
Lembre-se que alguns conceitos são subjetivos, eu posso gostar de um jeito e você ou o cliente de outro.

Também vou colocar códigos da página no final para não 'poluir' o visual e permitir a concentração nos conceitos sob estudo no momento.

Quando você conhecer bem os recursos vai ver que as regras abaixo são conceituais e podem ser 'flexibilizadas', mas só depois que souber de um 'modelo bom' vai poder pensar num melhor mas já sabendo o que foi feito e o que pode ser melhorado.

Conceito Fundamental

O principal fato que você deve conhecer é que pela CSS podemos colocar uma imagem de fundo em qualquer elemento html . O Browser dimensionará, da maneira dele, a imagem para que ocupe totalmente a área da tag.

O ponto chave é personalizar para que o conteúdo da tag harmonize com a imagem em seu fundo. Muitas vezes é uma questão de erros e acertos visto que não existe só um jeito da coisa ficar bem, existem muitos, uns melhores e outros piores, mas a questão chave é a que mais agrada o usuário/cliente que vai ve-la.

---

Exemplo 1 - Uma tag div e uma imagem

No exemplo abaixo coloquei uma imagem de fundo dentro do num elemento div que tem o texto: Testando...123 e coloquei a borda de 1px solid red para ficar bem denotado a tag div.Veja como ficou.

Note que coloquei a tag div no meio de um texto qualquer e como aqui esta fora da div, já não tem mais imagem de fundo.

Viu como fica horrível...o segredo não é conhecer o recurso mas sim como usá-lo e as suas possíveis combinações.

Como a tag div é uma tag do tipo block, ou seja, ocupa exclusivamente uma linha inteira

Ponto chave 1 :
Quando a imagem é bem menor que o espaço da tag a imagem é repetida horizontalmente, verticalmente até ocupar totalmente o espaço da tag ( width e height da tag).

Ponto chave 2 :
Se na repetição a imagem ultrapassar o limite da tag a imagem será recortada para caber exatamente no espaço da tag.

---

Regra 1 : Quem deve Prevalescer ?

É mais ou menos como uma dupla sertaneja...um canta e o outro faz o acompanhamento, o fundo, harmoniza os tons. Portanto ou o conteúdo da tag deve sobressair ou a imagem deve sobressair...os 2 em destaque gera confusão na leitura a menos que a sobreposição seja feita quando um 'prevalesce' e outro se 'esconde'.

Exemplo 2 - Fazendo o texto sobressair 1

Isso significa, pelo exemplo acima, que vou 'esmaecer' a imagem de fundo de maneira que ela não 'atrapalhe' tanto o conteúdo da tag. Isto é feito colocando na css o parâmetro 'opacity:0.3; na tag

'. Vejamos como fica

Novamente ficou uma porcaria porque o parâmetro Opacity foi aplicado em toda a tag div, no fundo e no conteúdo da tag (texto).

Exemplo 3 - Fazendo o texto sobressair 2

Vimos que ao aplicar o parâmetro Opacity na div todo o conteúdo da div foi afetada pelo parâmetro. O que nós queríamos é que somente a imagem ficasse mais 'opaca' mas não o texto que deveria permanecer destacado sobre a imagem.

Para contornar esse problemas vamos clarear a imagem e salva-la com outro nome. Veja como ficou abaixo:

Removi o parâmetro Opacity e o resultado acima ficou bem melhor...a imagem de fundo não se sobressai sobre a mensagem da tag.

---

Regra 2 : A imagem de fundo não deve ser do mesmo tipo do conteúdo da tag

Outra regra importante a seguir é que se você quer exibir uma mensagem sobre uma imagem elas não devem ter os mesmos elementos , ou seja, se a imagem tem um texto não coloque outro texto sobre a imagem...isso causa confusão. Para 2 textos ficarem bons, um na imagem e outro no texto, você fazer com que os textos não coincidam. Se coincidirem ou a gente lê um ou o outro. Veja o exemplo abaixo onde troquei a imagem com um texto por uma textura.

Exemplo 4 - Como fica aplicando o modelo ?

Vai concordar comigo que ficou bem melhor mas o erro da imagem repetir ainda mata. Ou a gente faz a imagem não repetir ou diminui o tamanho da div. O correto ai é achar uma textura do tamanho da div para ficar bom.

Tirando a repetição do fundo

Através do parâmetro repeat podemos pedir para o browser para :

• 1 - Repetir a imagem até ocupar todo espaço horizontal e vertical da tag pai (default).
repeat : A imagem é repetida vertical e horizontalmente até preencher a tag.

• 2 - Só repetir a imagem na horizontal.
repeat-x : A imagem é repetida somente horizontalmente até ocupar a largura da tag.

• 3 - Só repetir a imagem na vertical.
repeat-y : A imagem é repetida somente verticalmente até ocupar a altura da tag.

• 4 - Não repetir a imagem. no-repeat : A imagem não é repetida: somente uma cópia da imagem é desenhada.

Importante: O efeito de recortar a imagem quando ela ultrapassa o limite da tag não pode ser modificado.

Supondo agora que não quisesse que a imagem não se repetisse na horizontal. Ficaria assim :

Exemplo 5- Como fica aplicando o modelo ?

Bastou colocar o estilo style="background-repeat: repeat-y; para que a imagem não repetisse na horizontal, só na vertical seria repetida se necessário.
Contudo poderiamos usar o parâmetro no-repeat que teríamos o mesmo efeito.

Novamente não ficou bom mas a imagem não foi repetida horizontalmente que era o que queríamos.

Exemplo 6- Aperfeiçoando

Temos 2 maneiras de corrigir o tamanho da imagem. A maneira mais simples seria fazer a imagem ocupar 100% da área da tag. Pode esquecer...colocar um width:100% não funciona porque seria aplicado na div que já tem esse valor no parâmetro ( lembre-se...div é do tipo bloco e ocupa a linha inteira por default.).
A segunda maneira é ampliar a imagem para que ocupe toda a tag. A tag tem 100px de altura mas quanto de largura? Isso vai depender do dispositivo que vai exibir a página. No momento o monitor que estou usando tem 1920 px de largura por 1080 de largura. Sendo assim vou expandir a imagem para 1200 px de largura e ai garanto que a imagem preencherá toda a tag div.

Esse é o melhor jeito que podemos combinar esses 2 elementos...retirando a margem ele ficaria assim:

Exemplo 7- Final

Exemplo 8- E o famoso gradiente de cores de fundo ?

Como ficaria colocando um gradiente de cor como fundo ao invés de uma textura ?

Resumidamente é isso que se pode dizer sobre combinar imagens de fundos em tags.
Temos milhares de combinações possíveis...umas que se dão melhores em sites sóbrios e outros em sites multi-coloridos.

Códigos

Estilos / CSS:
<style>
        .ex1 {
            background-image: url(../imagens/w3jquery.gif);
            line-height: 100px; /* tamanho da altura de cada linha */
            border: 1px solid red;
            text-align:center;
            font-size:45px;
        }

        .ex2 {
            background-image: url(../imagens/w3jquery.gif);
            line-height: 100px; /* tamanho da altura de cada linha */
            border: 1px solid red;
            text-align: center;
            font-size: 45px;
            opacity:0.3;
        }


        .ex3 {
            background-image: url(../imagens/w3jquery.png);
            line-height: 100px; /* tamanho da altura de cada linha */
            border: 1px solid red;
            text-align: center;
            font-size: 45px;
        }

        .ex4 {
            background-image: url(imagens/Textura1.png);
            line-height: 100px; /* tamanho da altura de cada linha */
            border: 1px solid red;
            text-align: center;
            font-size: 45px;
        }

        .ex5 {
            background-image: url(imagens/Textura1.png);
            line-height: 100px; /* tamanho da altura de cada linha */
            border: 1px solid red;
            text-align: center;
            font-size: 45px;
            background-repeat:repeat-y;
        }

        .ex6 {
            background-image: url(imagens/Textura2.png);
            line-height: 100px; /* tamanho da altura de cada linha */
            border: 1px solid red;
            text-align: center;
            font-size: 45px;
            background-repeat: repeat-y;
        }

        .ex7 {
            background-image: url(imagens/Textura2.png);
            line-height: 100px; /* tamanho da altura de cada linha */
            text-align: center;
            font-size: 45px;
            background-repeat: repeat-y;
        }

        .ex8 {
            background-image: linear-gradient(to right, lightblue, yellow);
            line-height: 100px; /* tamanho da altura de cada linha */
            text-align: center;
            font-size: 45px;
            background-repeat: repeat-y;
        }
    </style>

tags:
<div class="ex1">Testando...123</div>
...
<div class="ex8">Testando...123</div>