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
Como o layout do seu site muda e se dimensiona com diferentes tamanhos de tela, essas imagens 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 web design responsivo desde o início, mas, embora sempre tenha sido bastante fácil adicionar imagens inline responsivas a um site (imagens inline são os gráficos que são codificados como parte da marcação HTML), o mesmo acontece com as imagens de fundo (que são estilizadas na página usando propriedades de fundo CSS) há muito tempo é um desafio significativo para muitos web designers e desenvolvedores front-end. Felizmente, a adição da propriedade “background-size” no CSS tornou isso possível. Em um artigo separado, cobrimos como usar a propriedade background-size do 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 propriedades e valores: background-size: cover;
type = “code”> A propriedade da palavra-chave cover diz ao navegador para dimensionar a imagem para caber na janela, independentemente de quão grande ou pequena a janela fique. A imagem é dimensionada para cobrir toda a tela, 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 na 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 da imagem em questão. 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á dos lados inferior e direito. 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 para um tamanho maior do que suas dimensões originais, a qualidade visual será degradada, tornando-se borrada e pixelada. 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 preparar adequadamente 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, seja ela ampla e exibida em um computador desktop ou muito menor e enviada para um dispositivo portátil ou móvel dispositivos. Carregue sua imagem em seu host e adicione-a ao CSS como imagem de fundo: background-image: url (fireworks-over-wdw.jpg);
repetição de fundo: sem repetição;
posição de fundo: centro central;
anexo de fundo: fixo;
type = “code”> Adicione o CSS com prefixo do navegador primeiro: -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
type = “code”> Em seguida, adicione a propriedade CSS: background-size: cover;
type = “código”>
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 isso. 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. Saiba como você pode usar consultas de mídia para exibir imagens que serão adequadas aos dispositivos em que serão exibidas e melhorar ainda mais a compatibilidade do seu site com dispositivos móveis.
