Uma imagem de plano de fundo pode ser especificada para quase qualquer elemento HTML.
Veja aqui uma imagem de fundo:
<div style="background-image: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png');">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
Você também pode especificar a imagem de plano de fundo no <style> elemento, na <head> seção:
<style>
div {
background-image: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png');
}
</style>
Imagem de fundo em uma página
Se você deseja que a página inteira tenha uma imagem de plano de fundo, especifique a imagem de plano de fundo no <body>elemento:
Exemplo
Adicione uma imagem de plano de fundo para a página inteira:
<style>
body {
background-image: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png');
}
</style>
Para evitar a imagem de fundo se repita, defina a background-repeat propriedade para no-repeat.
<style>
body {
background-image: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png');
background-repeat: no-repeat;
}
</style>
Capa de fundo
Se você deseja que a imagem de plano de fundo cubra todo o elemento, defina a background-size propriedade como cover.
Além disso, para garantir que todo o elemento esteja sempre coberto, configure a background-attachment propriedade como fixed:
Dessa forma, a imagem de plano de fundo cobrirá todo o elemento, sem alongamento (a imagem manterá suas proporções originais):
<style>
body {
background-image: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Para alongar
<style>
body {
background-image: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
<< Anterior Imagens HTML
Deixe um comentário