A background-imagepropriedade em CSS aplica um gráfico (por exemplo, PNG, SVG, JPG.webp, GIF, WEBP) ou gradiente ao fundo de um elemento.
Existem dois tipos diferentes de imagens que você pode incluir com CSS: imagens regulares e gradientes.
Imagens
Usar uma imagem em um plano de fundo é muito simples:
body ( background: url(sweettexture.jpg.webp); )O url()valor permite que você forneça um caminho de arquivo para qualquer imagem e ele aparecerá como plano de fundo para esse elemento.
Você também pode definir um URI de dados para o url(). Isso se parece com isto:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Essa técnica remove uma solicitação HTTP, o que é uma coisa boa. Porém, há uma série de desvantagens, portanto, antes de começar a substituir todas as suas imagens, certifique-se de considerar todos os prós e contras dos URIs de dados.
Você também pode usar background-imagepara sprite de imagens, que é outro método útil para reduzir solicitações HTTP.
Gradientes
Outra opção ao usar fundos é dizer ao navegador para criar um gradiente. Aqui está um exemplo super duper simples de um gradiente linear:
body ( background: linear-gradient(black, white); )Você também pode usar gradientes radiais:
body ( background: radial-gradient(circle, black, white); )Tecnicamente falando, gradientes são apenas outra forma de imagem de fundo. A diferença é que o navegador faz a imagem para você. Veja como escrevê-los: Sintaxe de gradiente CSS3
O exemplo acima usa apenas um gradiente, mas você também pode colocar vários gradientes em camadas, uns sobre os outros. Existem alguns padrões bastante surpreendentes que você pode criar usando esta técnica.
Definindo uma cor substituta
Se uma imagem de plano de fundo não carregar, ou o seu plano de fundo gradiente for visualizado em um navegador que não oferece suporte a gradientes, o navegador procurará uma cor de plano de fundo como alternativa. Você pode especificar sua cor substituta desta forma:
body ( background: url(sweettexture.jpg.webp) blue; )Várias imagens de fundo
Você pode usar várias imagens ou uma mistura de imagens e gradientes como plano de fundo. Várias imagens de fundo são bem suportadas agora (todos os navegadores modernos e IE9 + para imagens gráficas, IE10 + para gradientes).
Ao usar várias imagens de fundo, esteja ciente de que há uma ordem de empilhamento um tanto contra-intuitiva. Liste a imagem que deve estar primeiro na frente e a imagem que deve ficar atrás por último, assim:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Ao usar várias imagens de plano de fundo, muitas vezes você precisará definir mais valores para o plano de fundo para colocar tudo no lugar certo. Se você quiser usar a backgroundabreviação, pode definir os valores para cada imagem individualmente. Sua abreviação será parecida com isto (observe a vírgula separando a primeira imagem e seus valores da segunda imagem e seus valores):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Não há limite para quantas imagens de fundo você pode definir e você pode fazer coisas interessantes, como animar suas imagens de fundo. Há um bom exemplo de várias imagens de fundo com animação no blog de David Walsh.
Demo
Veja a imagem de fundo da caneta por CSS-Tricks (@ css-tricks) no CodePen.
Relacionado
- anexo de fundo
- clipe de fundo
- cor de fundo
- origem do fundo
- posição de fundo
- fundo de repetição
- tamanho do fundo
Mais recursos
- A especificação CSS3
- MDN
- Imagens de fundo de página inteira perfeitas
- Mastering CSS Gradients (Slidedeck)
Suporte para navegador
Imagens regulares funcionam em qualquer lugar, e várias imagens funcionam em navegadores modernos e no IE9 +. Aqui está o suporte para gradientes:
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3,6+ | 12,1+ | 10+ | 4+ | 5.1+ |