Olhe para sites populares hoje e um tratamento de design que você tem certeza de ver é grande, imagens de fundo abrangendo a tela. Um dos desafios de adicionar essas imagens é a melhor prática que os sites devem responder a diferentes tamanhos de tela e dispositivos - uma abordagem conhecida como design da Web responsivo.
Como o layout do seu site é alterado e dimensionado com diferentes tamanhos de tela, essas imagens de plano de fundo também precisam dimensionar seu tamanho de acordo. Na verdade, essas "imagens fluidas" são uma das principais peças de sites responsivos (junto com uma grade fluida e consultas de mídia). Essas três partes têm sido um marco do design da Web responsivo desde o início, mas sempre foi bastante fácil adicionar imagens em linha responsivas a um site (as imagens embutidas são os gráficos codificados como parte da marcação HTML), fazendo o seguinte: O mesmo acontece com as imagens de segundo plano (que são estilizadas na página usando as propriedades de plano de fundo do CSS) há muito tempo representam um desafio significativo para muitos designers da Web e desenvolvedores front-end. Felizmente, a adição da propriedade "background-size" no CSS tornou isso possível.
Em um artigo separado, eu falei sobre como usar a propriedade CSS3 tamanho de fundo para esticar imagens para caber em uma janela, mas há uma maneira ainda melhor e mais útil de implantar para essa propriedade. Para fazer isso, usaremos a seguinte propriedade e combinação de valores:
tamanho de fundo: capa;
o tampa A propriedade keyword informa ao navegador para dimensionar a imagem para se ajustar à janela, independentemente de quão grande ou pequena essa janela seja. A imagem é dimensionada para cobrir toda a tela, mas as proporções originais e a proporção são mantidas intactas, evitando que a própria imagem seja distorcida. A imagem é colocada na janela o maior possível para que toda a superfície da janela seja coberta. Isso significa que você não terá nenhum espaço em branco na 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 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ê usar 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 está espalhado, o impacto em qualquer um dos lados será menor.
Como usar tamanho de fundo: capa;
Ao criar sua imagem de plano de fundo, é uma boa ideia criar uma imagem que seja bem grande. Enquanto os navegadores podem tornar uma imagem menor sem um impacto perceptível na qualidade visual, quando um navegador dimensiona uma imagem para 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 recebe um desempenho quando você está entregando imagens gigantes para todas as telas. Quando você fizer isso, certifique-se de preparar adequadamente essas imagens para velocidade de download e entrega pela web. No final, você precisa encontrar o meio feliz entre um tamanho de imagem e qualidade suficientemente grande e um tamanho de arquivo razoável para velocidades de download.
Uma das maneiras comuns de usar o dimensionamento de imagens de plano de fundo é quando você deseja que a imagem ocupe todo o plano de uma página, seja ela ampla e vista em um computador desktop ou muito menor e sendo enviada para um computador de mão. dispositivos.
Envie sua imagem para o seu host e adicione-a ao seu CSS como imagem de fundo:
imagem de fundo: url (fireworks-over-wdw.jpg);background-repeat: sem repetição;posição de fundo: centro central;fundo-anexo: fixo;
Adicione o CSS prefixado pelo navegador primeiro:
-webkit-background-size: capa;-moz-background-size: capa;-o-fundo-tamanho: capa;
Em seguida, adicione a propriedade CSS:
tamanho de fundo: capa;
Usando imagens diferentes que combinam com 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 aumentou significativamente, e uma variedade maior de tamanhos de tela vem com isso.
Como mencionado anteriormente, o carregamento de uma imagem de fundo responsiva muito grande em um smartphone, por exemplo, não é um design eficiente ou consciente da largura de banda.
Saiba como você pode usar as consultas de mídia para veicular imagens que serão apropriadas para os dispositivos nos quais elas serão exibidas e melhorar ainda mais a compatibilidade do seu website com dispositivos móveis.
