Página com Imagem de Fundo

Enviado por mrab em 23. Janeiro 2024 - 15:31

Bem-vindo ao tutorial para criar uma página web simples com uma imagem de fundo usando HTML5 e CSS3.

Vamos entender cada linha do código fornecido:

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  
  
  <title>Página com Imagem de Fundo</title>
  
  
  <style>
    /* Estilo para o corpo da página */
    body {
      margin: 0; /* Remove margens padrão do corpo */
      padding: 0; /* Remove preenchimentos padrão do corpo */
      background-image: url('caminho/para/sua/imagem.jpg'); /* Substitua pelo caminho da sua imagem de fundo */
      background-size: cover; /* Garante que a imagem de fundo cubra toda a área visível */
      background-position: center; /* Centraliza a imagem de fundo */
      font-family: Arial, sans-serif; /* Define a fonte do texto */
      color: #ffffff; /* Define a cor do texto como branco */
    }

/* Estilo para o conteúdo da página */
    .conteudo {
      padding: 20px; /* Adiciona preenchimento ao conteúdo para espaçamento interno */
      text-align: center; /* Centraliza o texto no conteúdo */
    }
  </style>
</head>
<body>
  
  <div class="conteudo">
    
    <h1>Bem-vindo à Minha Página</h1>
    
    <p>Esta é uma página com uma imagem de fundo.</p>
  </div>
</body>
</html>

Seção:

HTML/CSS