Imagem de fundo CSS

Índice

Imagem de fundo CSS

A propriedade background-image especifica uma imagem para usar como plano de fundo de um elemento.

Por padrão, a imagem é repetida para cobrir todo o elemento.

Exemplo

Defina a imagem de fundo de uma página:

body {
  background-image: url("paper.gif");
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

Exemplo

Este exemplo mostra uma má combinação de texto e imagem de fundo. O texto é dificilmente legível:

body {
  background-image: url("bgdesert.jpg");
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>

Observação: Ao usar uma imagem de fundo, use uma imagem que não perturbe o texto.

A imagem de fundo também pode ser definida para elementos específicos, como o elemento <p>:

Exemplo

 p {
  background-image: url("paper.gif");
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>
</html>

A propriedade da imagem de fundo CSS

background-image: Define a imagem de fundo de um elemento