CSS - Fundos

Este capítulo ensina como definir planos de fundo de vários elementos HTML. Você pode definir as seguintes propriedades de fundo de um elemento -

o background-color propriedade é usada para definir a cor de fundo de um elemento.
o background-image propriedade é usada para definir a imagem de fundo de um elemento.
o background-repeat propriedade é usada para controlar a repetição de uma imagem em segundo plano.
o background-position propriedade é usada para controlar a posição de uma imagem no fundo.
o background-attachment propriedade é usada para controlar a rolagem de uma imagem em segundo plano.
o background propriedade é usada como uma abreviação para especificar várias outras propriedades de fundo.

Defina a cor de fundo

A seguir está o exemplo que demonstra como definir a cor de fundo de um elemento.

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         This text has a yellow background color.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Definir a imagem de fundo

Podemos definir a imagem de fundo chamando as imagens armazenadas locais, conforme mostrado abaixo -

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Hello World!</h1>
   </body>
<html>

Isso produzirá o seguinte resultado -

Repita a imagem de fundo

O exemplo a seguir demonstra como repetir a imagem de plano de fundo se uma imagem for pequena. Você pode usar no-repeat valor para background-repeat propriedade, se você não quer repetir uma imagem, nesta imagem caso será exibido apenas uma vez.

Por padrão , a propriedade background-repeat terá um valor de repetição .

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

O exemplo a seguir demonstra como repetir a imagem de fundo verticalmente.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

O exemplo a seguir demonstra como repetir a imagem de fundo horizontalmente.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Definir a posição da imagem de fundo

O exemplo a seguir demonstra como definir a posição da imagem de fundo 100 pixels de distância do lado esquerdo.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

O exemplo a seguir demonstra como definir a posição da imagem de fundo 100 pixels longe do lado esquerdo e 200 pixels abaixo do topo.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Definir o anexo de fundo

O anexo de plano de fundo determina se uma imagem de plano de fundo é fixa ou rola com o resto da página.

O exemplo a seguir demonstra como definir a imagem de plano de fundo fixa.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

O exemplo a seguir demonstra como definir a imagem de fundo de rolagem.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Propriedade abreviada

Você pode usar a propriedade background para definir todas as propriedades do background de uma vez. Por exemplo -

<p style = "background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>

↰ Previous page Next page ↱