Observe os sites populares hoje em dia e um tratamento de design que você certamente verá são imagens de fundo grandes que abrangem a tela. Um dos desafios de adicionar essas imagens vem da prática recomendada de que os sites devem responder a diferentes tamanhos de tela e dispositivos - uma abordagem conhecida como web design responsivo.
Uma imagem para muitas telas
Uma vez que o layout do seu site muda e é dimensionado com diferentes tamanhos de tela, essas imagens de plano de fundo também devem ser dimensionadas de acordo. Na verdade, essas "imagens fluidas" são uma das peças-chave de sites responsivos (junto com uma grade fluida e consultas de mídia). Essas três peças têm sido a base do design ágil da web desde o início, mas, embora sempre tenha sido bastante fácil adicionar ágil imagens embutidas em um site (imagens embutidas são os gráficos que são codificados como parte da marcação HTML), fazendo o mesmo com imagens de fundo (que são estilizados na página usando propriedades de fundo CSS) há muito tempo é um desafio significativo para muitos designers da web e front-end desenvolvedores. Felizmente, a adição da propriedade "background-size" no CSS tornou isso possível.
Em um artigo separado, abordamos como usar o Tamanho de fundo da propriedade CSS3 para esticar imagens para caber em uma janela, mas há uma maneira ainda melhor e mais útil de implantar essa propriedade. Para fazer isso, usaremos a seguinte combinação de propriedade e valor:
tamanho do fundo: capa;
A propriedade da palavra-chave cover informa ao navegador para dimensionar a imagem para caber na janela, independentemente do tamanho da janela. A imagem é dimensionada para cobrir a tela inteira, mas as proporções e a proporção do original são mantidas intactas, evitando que a própria imagem seja distorcida. A imagem é colocada na janela o maior possível, de modo que toda a superfície da janela seja coberta. Isso significa que você não terá pontos em branco em sua página ou qualquer distorção na imagem, mas também significa que parte da imagem pode ser cortada dependendo da proporção da tela e a imagem em pergunta. Por exemplo, as bordas de uma imagem (superior, inferior, esquerda ou direita) podem ser cortadas nas imagens, dependendo de quais valores você usa para a propriedade background-position. Se você orientar o fundo para "canto superior esquerdo", qualquer excesso na imagem sairá da parte inferior e direita. Se você centralizar a imagem de fundo, o excesso sairá de todos os lados, mas como esse excesso é espalhado, o impacto em qualquer um dos lados será menor.
Como usar 'background-size: cover;'
Ao criar sua imagem de plano de fundo, é uma boa ideia criar uma imagem bastante grande. Enquanto os navegadores podem tornar uma imagem menor sem um impacto perceptível na qualidade visual, quando um navegador aumenta uma imagem a um tamanho maior do que suas dimensões originais, a qualidade visual será degradada, tornando-se borrada e pixelizada. A desvantagem disso é que sua página sofre um impacto no desempenho quando você exibe imagens gigantes em todas as telas. Ao fazer isso, certifique-se de prepare essas imagens para velocidade de download e entrega na web. No final, você precisa encontrar o meio termo entre um tamanho e qualidade de imagem grandes o suficiente e um tamanho de arquivo razoável para velocidades de download.
Uma das maneiras comuns de usar o dimensionamento de imagens de fundo é quando você deseja que a imagem ocupe todo o fundo de uma página, se a página é larga e sendo visualizada em um computador desktop ou muito menor e está sendo enviada para um dispositivo portátil, móvel dispositivos.
Faça upload de sua imagem para seu host da web e adicione-a ao CSS como uma imagem de fundo:
imagem de fundo: url (fireworks-over-wdw.jpg);
repetição de fundo: sem repetição;
posição de fundo: centro central;
anexo de fundo: fixo;
Adicione o CSS com o prefixo do navegador primeiro:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Em seguida, adicione a propriedade CSS:
tamanho do fundo: capa;
Usando imagens diferentes que se adaptam a dispositivos variados
Embora o design responsivo para uma experiência de desktop ou laptop seja importante, a variedade de dispositivos que podem acessar a web cresceu significativamente, e uma maior variedade de tamanhos de tela vem com naquela.
Como mencionado anteriormente, carregar uma imagem de fundo responsiva muito grande em um smartphone, por exemplo, não é um design eficiente ou que leva em conta a largura de banda.
Aprenda como você pode usar consultas de mídia para veicular imagens que serão adequadas aos dispositivos em que serão exibidos e melhorar ainda mais a compatibilidade do seu site com dispositivos móveis.