a frase fica pra cima do box e a imagem da mulher fica cortada, vi a mesma duvida em outros topicos mas mesmo assim não consegui a solução pro meu problema especifico.
a frase fica pra cima do box e a imagem da mulher fica cortada, vi a mesma duvida em outros topicos mas mesmo assim não consegui a solução pro meu problema especifico.
Oi!
Tem duas formas possíveis de corrigir, dependendo de como você está aplicando o fundo:
Se a imagem é aplicada via CSS (como background)
Abra o arquivo CSS e verifique algo parecido com isso:
body {
background-image: url('imagens/fundo.png');
background-repeat: no-repeat;
background-size: cover;
}
Nesse caso, altere o background-size e o background-position:
body {
background-image: url('imagens/fundo.png');
background-repeat: no-repeat;
background-size: contain; /* ou 'auto' */
background-position: center;
background-color: #000; /* cor de fundo para complementar */
}
contain mantém a proporção da imagem sem cortá-la.cover preenche toda a tela, mas pode cortar partes (o que parece ser o seu caso).background-position: center centraliza a imagem. Se a imagem está no HTML (por exemplo, uma <img>)
Verifique no HTML:
<img src="imagens/fundo.png" class="fundo">
E no CSS:
.fundo {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
width: 100% garante que ela se ajuste à largura da tela.object-fit: contain evita que a imagem estique ou corte.display: block remove espaços indesejados.Se a personagem está dentro de uma div específica (como .container ou .box), também vale garantir que o CSS dessa div não esteja forçando o conteúdo a expandir:
.container {
max-width: 800px;
margin: 0 auto;
overflow: hidden;
}
Uma dica: SEMPRE envie o código no github assim as pessoas podem ajudar logo de cara.