HTML Background não aparece na página

Patrick Franco · 23 de agosto de 2018

Estou aprendendo HTML e tentei por uma imagem de fundo, mas não entra.

HTML:

<!DOCTYPE HTML><!--Instrução especial que indica para o navegador a versão atual do html-->

<!--Tag inicial da codificação-->
<html>

	<!--Tag que contém informações sobre o documento de interesse do navegador e não dos visitantes do site-->
	<head><!--Tag inicial do cabeçalho -->
		<link rel="stylesheet" href="styles/style.css">
		<title>Universidade anhanguera</title><!--Título que será exibido na barra de títulos da janelas do navegador-->
		<!--Configuração da codificação dos caracteres - Unicode (utf8)-->
	<meta charset="utf-8">
	</head><!--Tag final do cabeçalho-->

	<body><!--Tag inicial do corpo do documento-->
		<!--Comentário:primeira página html 5-->
		<h1>Boletim Escolar-1ºbimestre</h1><!--Título no formato h1-->
		<h2>Nome: Patrick Neves Da Silva Franco</h2><!--Título no formato h2-->
		<h3>CPF: 491.878.978-14</h3><!--Título no formato h3-->
		<ul> <!--Lista não ordenada-->
			<li>Curso: Análise e Desenvolvimento de Sistemas</li><!--Item da lista-->
			<li>Turma: 2ªA </li><!--Item da lista -->
			<li>Periodo: Noturno</li><!--Item da Lista-->
			<br>
			<li>Matéria: Projeto Integrado II</li><!--Item da lista-->
			<li>Nota: 14.000 Pontos </li><!--Item da lista -->
			<br>
			<li>Matéria: Sistemas de Computação e de informação II</li>
			<li>Nota: 14.000 Pontos </li>
		</ul>
		<!--Parágrafo-->

		<p>Boletim Escolar para acompanhamento do desempenho acadêmico do aluno. 
		Qualquer dúvida,o aluno deve-se dirigir ao DCA(departamento de controle acadêmico) da Universidade.</p>
	</body><!--Tag final do corpo do documento-->
</html>

CSS:

body{
background-image: url(/media/background.jpg);
background-size: 100%;
}

Tentei por diversas coisas no CSS mas nada funcionou.

navegantenarede · 23 de agosto de 2018

@Patrick Franco, o código está correto, verifica somente o caminho da imagem, se está certo, assim como o nome do arquivo.

Exemplo com o seu código: https://jsfiddle.net/12zp4rdn/1/

makotsunami · 23 de agosto de 2018

Seguinte cara...

Se eu não me engano você precisa colocar essa URL do seu CSS entre aspas.

Dica: usar imagem de background não é legal, seu site fica pesado e o loading da imagem é feito depois do loading do site, então vai ficar esquisito, a imagem só vai aparecer depois que tudo estiver carregado.

Você consegue usar "falsas imagens" como background utilizando apenas CSS, dá uma olhada em: http://lea.verou.me/css3patterns/