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/como-colocar-um-fundo-de-imagem-em-uma-pagina-html.jpg');
}
</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/como-colocar-um-fundo-de-imagem-em-uma-pagina-html.jpg');
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/como-colocar-um-fundo-de-imagem-em-uma-pagina-html.jpg');
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/como-colocar-um-fundo-de-imagem-em-uma-pagina-html.jpg');
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>
<< Anterior Como criar um balão de mensagem com html e css
Deixe um comentário