Eu fiz um imagem de fundo, 1366px de largura e 768px de altura, que eu quero usar como plano de fundo para a página principal do meu local na rede Internet.
Eu tenho cada página do meu site dividida em seções, usando o plugin FullPage. Esta é a página principal, então estou usando apenas a primeira seção.
O que eu tentei até agora é adicionar isso CSS código para a #first seção da minha página principal:
#first{
width: 500px;
height: 500px;
background-image: url(images/ClanshnowXmasEventSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Infelizmente, a imagem é exibida apenas parcialmente. Na verdade, é um pouco mais curto do que realmente é.
Eu li o documentação para o tamanho de fundo atributo, e no atributo cover diz:
Escale a imagem de plano de fundo para que fique o maior possível, para que a área de plano de fundo seja completamente coberta pela imagem de plano de fundo. Algumas partes da imagem de plano de fundo podem não estar visíveis na área de posicionamento do plano de fundo
Então, basicamente, como posso fazer com que minha imagem de fundo se ajuste ao tamanho da tela? Considerando o lado móvel, acho que seria melhor ajustar apenas a largura dele. Estou aberto a sugestões e ajuda!
Respostas:
-1 para resposta № 1Dê uma olhada aqui: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari
Boa sorte!