1
resposta

Background com gradiente não aparece :(

oii, galera! tudo bom? estou com dificuldade para implementar um background com gradiente. já tentei colocar o background no css em body e no html em style, mas não funcionou. se alguém puder me ajudar, agradeço muito!

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="reset.css">
    <title>Calculadora</title>
    <style>
        body{
            background-image: linear-gradient(102.4deg,rgba(253,189,85,1) 7.8%,rgba(249,131,255,1) 100.3%);
        }
    </style>

</head>

CSS

body{
    display: flex;
    text-align: center;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
1 resposta

Oi Drielle, tudo bem com você?

Analisando seu código, vou explicar em partes o que está incomum para melhor entendimento:

  • A sua estrutura HTML está incompleta, pois falta a tag <body>, onde deve ser colocada a tag <style>e outros conteúdos da página, além de você também ter esquecido de fechar o código com a tag</hmtl>.

  • O arquivo reset.cssestá depois do arquivo style.css e isso faz com que todo os estilos criados no mesmo seja resetado antes de carregar a página.

  • A propriedade position: absolute;está bloqueando a visualização do background. O ideal seria você excluir essa linha do CSS e adicionar width (largura) e height (altura) para que o fundo seja exibido corretamente.

Uma dica é que você estilize o seu background diretamente no CSS para ficar mais organizado. Além disso, se quiser aprender mais sobre a propriedade positionCSS recomendo que leia o artigo Entenda a propriedade Position CSS, ele foi escrito pelo Luan Alves, instrutor de Front-end, e vai esclarecer muito sobre o assunto.

Em caso de mais dúvidas, me coloco à disposição.

Grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
.