Como colocar um fundo de imagem em uma página HTML


Hoje, vou ensinar a como colocar um fundo de imagem em uma página HTML

 

Vou usar essa imagem de teste

Vou mostrar 4 exemplos de como fica

Um exemplo que se repete

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/08/img_5f36e8fe4344b.png');
}
</style>
</head>
<body>

<h2>Background Repeat</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>


 

Outro exemplo que se ajusta

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/08/img_5f36e8fe4344b.png');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>
</head>
<body>

<h2>Background Cover</h2>

<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the body element.</p>

</body>
</html>


E um exemplo que ajusta com Cover

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/08/img_5f36e8fe4344b.png');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>
</head>
<body>

<h2>Background Cover</h2>

<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the body element.</p>

</body>
</html>


 

Veja com 100%

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/08/img_5f36e8fe4344b.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}
</style>
</head>
<body>

<h2>Background Stretch</h2>

<p>Set the background-size property to "100% 100%" and the background image will be stretched to cover the entire element, in this case the body element.</p>

</body>
</html>


Categoria: css | Tags: , , , | Postado por joemaster em 14/ago/2020

<< Anterior

Próximo >>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *