Hoje em dia, sites com imagens de fundo responsivas são muito procurados. Sites responsivos fornecem aos usuários uma experiência de usuário ideal em quase todos os dispositivos, incluindo celulares, tablets ou desktops. Imagens responsivas podem adaptar o plano de fundo do site, o tamanho da tela e as dimensões. Imagens responsivas garantem que a qualidade e a proporção sejam mantidas. Além disso, o site com imagens de fundo responsivas carrega rapidamente.
Este guia fornecerá instruções para adaptar as imagens de fundo às dimensões da tela.
Como adaptar imagens de fundo às dimensões da tela?
A imagem pode se adaptar às dimensões da tela seguindo as instruções passo a passo fornecidas abaixo.
Etapa 1: crie uma estrutura HTML
Primeiro, crie uma estrutura HTML e adicione a folha de estilo externa usando o
< HTML >
< cabeça >
< link rel = 'folha de estilo' href = 'estilo.css' >
< título > Imagem de fundo responsiva título >
cabeça >
< corpo >
--Área para adicionar outros conteúdos-- >
corpo >
HTML >
Etapa 2: aplicar CSS
Agora, aplique o CSS ao “ corpo ' seção. Primeiro, especifique a imagem de fundo. Para isso, utilize o “ imagem de fundo ”E especifique o“ url() ”Valor contendo o endereço do arquivo de imagem.
Depois disso, use o “ imagem de fundo ”Para especificar o tamanho da imagem, o“ fundo de repetição ”Propriedade para definir a repetição da imagem e“ anexo de fundo ”Para definir se a imagem rola com o resto da página ou não. Por último, defina o “ margem ' e ' preenchimento ' para ' 0 ”:
corpo {imagem de fundo: url ( 'imagem-teste.jpg' ) ;
tamanho do plano de fundo: 100 % 100 % ;
/* Dimensione a imagem para 100 % largura e 100 % altura */
repetição em segundo plano: sem repetição;
anexo de fundo: fixo;
margem: 0 ;
preenchimento: 0 ;
/* Opcional: fundo fixo */
}
Saída
Esta é a saída antes de contrair a janela do navegador:
Após a contração do navegador:
A saída acima confirma que a imagem adaptou o fundo às dimensões da tela.
Conclusão
Para adaptar as imagens de fundo às dimensões da tela, primeiro inclua o “ janela de exibição ”Na seção principal para controlar dimensões e escala. Em seguida, crie uma estrutura HTML e aplique CSS. Em CSS, defina o “ tamanho do fundo ”Valor da propriedade para“ cobrir ”Valor para dimensionar a altura e largura de uma imagem. Este artigo apresentou um guia completo para adaptar imagens de fundo às dimensões da tela.