CSS3

Como deixar a imagem de fundo fixa usando CSS?

by Desenvolvimento

A ideia desse post é mostrar a você como deixar a imagem de fundo fixa usando CSS, que é um recurso interessante em muitos casos.

Na verdade, o recursos que vamos usar é a propriedade background-attachment que vai permitir usar não só a imagem de modo fixo, mas também podemos rolar junto com página.

Nesse caso, vamos usar o valor fixed para que a imagem fique fixa enquanto o conteúdo rola (scroll) na página.

Então, aqui está um exemplo:

<!DOCTYPE html>
<html>

<head>
	<style type="text/css">
		h1 {
			text-align: center;
		}

		#ex {
			text-align: center;
			background-image:
url("https://asllanmaciel.com.br/wp-content/uploads/2019/02/logo_am_300x87_gradiente-1.png");
			background-position: center;
			background-repeat: no-repeat;
			background-attachment: fixed;
		}
	</style>
</head>

<body>

	<h1>Exemplo de Imagem de Fundo Fixa</h1>

	<div id="ex">
		
<p>
			Paragraphs are the building blocks
			of papers. Many students define
			paragraphs in terms of length: a
			paragraph is a group of at least
			five sentences,
		</p>

		<br><br>

		
<p>
			a paragraph is half a page long,
			etc. In reality, though, the unity
			and coherence of ideas among
			sentences is what constitutes a
			paragraph.
		</p>

		<br><br>

		
<p>
			A paragraph is defined as “a group
			of sentences or a single sentence
			that forms a unit” (Lunsford and
			Connors 116).
		</p>


		<br><br>
		
<p>
			Length and appearance do not
			determine whether a section in
			a paper is a paragraph.
		</p>

		<br><br>

		
<p>
			For instance, in some styles of
			writing, particularly journalistic
			styles, a paragraph can be just
			one sentence long. Ultimately, a
			paragraph is a sentence or group of
			sentences that support one main idea.
		</p>

		<br><br>

		
<p>
			In this handout, we will refer to this
			as the “controlling idea,” because it
			controls what happens in the rest
			of the paragraph.
		</p>

	</div>
</body>

</html>

Resultado:

Example for fixed Background Image

Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences,



a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph.



A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116).



Length and appearance do not determine whether a section in a paper is a paragraph.



For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea.



In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph.

Navegadores suportados:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Ópera 3.5
  • Safari 1.0