Por padrão, a background-image propriedade repete uma imagem horizontal e verticalmente.
Algumas imagens devem ser repetidas apenas na horizontal ou na vertical, ou elas parecerão estranhas, assim:
body {
background-image: url("gradient_bg.png");
}
Se a imagem acima for repetida apenas horizontalmente ( background-repeat: repeat-x;), o fundo ficará melhor:
Exemplo
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
CSS background-repeat: sem repetição
A exibição da imagem de plano de fundo apenas uma vez também é especificada pela background-repeatpropriedade:
Exemplo
Mostre a imagem de fundo apenas uma vez:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Posição de fundo do CSS
A background-position propriedade é usada para especificar a posição da imagem de fundo.
Exemplo
Posicione a imagem de fundo no canto superior direito:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
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 Fundos CSS
Deixe um comentário