Thumbnail vs background: quando usar cada um – ZenBlocks buttonBasic
Conclusao
A **thumbnail** e uma imagem independente dentro do botao. O **background** e a camada visual de fundo de todo o botao.
—
Comparacao
| Criterio | Thumbnail | Background |
|—|—|—|
| Posicao | Dentro do botao | Fundo geral do botao |
| Relacao com texto | Lado a lado ou acima/abaixo | Texto sobreposto |
| Controle de tamanho | `Width` / `Height` dedicados | `Background Size` |
| Hover | Pode variar tamanho/posicao | Variacao via overlay/cor |
| Video | Nao | Sim |
| Overlay | Nao | Sim |
| Border radius | Proprio da thumbnail | Geralmente segue o botao |
| Responsive | Ajustavel por dispositivo | Ajustavel por dispositivo |—
Criterios de uso
### Use thumbnail quando
1. Precisa mostrar produto/logo especifico.
2. Quer composicao texto + imagem dentro do botao.
3. Quer estilizar a imagem separadamente.
4. Quer efeito de zoom no hover.### Use background quando
1. Quer criar atmosfera visual geral do botao.
2. Vai usar texto sobre foto com overlay.
3. Precisa de video de fundo.
4. Quer estados `Default/Hover` diferentes.### Usar ambos
Pode combinar:
– background para ambientacao,
– thumbnail para visual principal,
– texto CTA para acao.—
Observacoes
– Thumbnail usa `object-fit`; pode haver corte dependendo da proporcao.
– Overlay muito opaco pode esconder o fundo.
– Midias pesadas afetam desempenho.—
Configuracoes relacionadas
– [Thumbnail Settings](../thumbnail/)
– [Background Settings](../background/)
– [Layout Settings](../layout/)