Neste artigo, aprenderemos como anexar imagens de fundo usando Tailwind CSS.

Abordagem:

Você pode facilmente anexar imagens de fundo usando a propriedade background-attachment no Tailwind CSS. Todas as propriedades são abordadas em forma de aula. É a alternativa à propriedade CSS background-attachment . Ele pode ser configurado para rolar ou permanecer fixo. 

Classes de anexo em segundo plano:

  • bg-fixed: Esta classe é usada para corrigir a imagem de fundo em relação à janela de visualização.
  • bg-local: esta classe é usada para rolar a imagem de fundo com o contêiner e a janela de visualização.
  • bg-scroll: Esta classe é usada para rolar a imagem de fundo com a janela de visualização, mas não com o contêiner.

Sintaxe:

<div class="bg-fixed ...">
    ...
</div>

Exemplo 1: O exemplo a seguir demonstra como corrigir a imagem de fundo em relação à janela de visualização usando a classe bg-fixed . 

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
  
    <b>Tailwind CSS Background Attachment Class</b>
      
    <div class="mx-4  h-screen w-full">
        <div class="bg-fixed bg-contain overflow-auto 
            m-20 h-80 w-38" style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210603152813/tree276014340-300x191.jpg
            )">
        </div>
    </div>
</body>
  
</html>

Saída:

bg-fixed

Exemplo 2: O exemplo a seguir demonstra como corrigir a imagem de fundo com o contêiner e a janela de visualização usando a propriedade bg-local .

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body>
  
    <div class="mx-4  flex items-center 
        justify-center h-screen w-full">
  
        <div class="bg-local bg-contain 
            overflow-auto m-20 h-80 w-38" 
            style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210603154238/download-200x125.jpeg)">
  
            <div class="h-64 w-64"></div>
        </div>
    </div>
</body>
  
</html>

Saída:

bg-local

Exemplo 3: O exemplo a seguir demonstra como corrigir a imagem de plano de fundo com a janela de visualização, mas não com o contêiner usando a propriedade bg-scroll .

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body>
  
    <div class="mx-4  flex items-center 
        justify-center h-screen w-full">
  
        <div class="bg-scroll bg-contain 
            overflow-auto m-20 h-60 w-38" 
            style="background-image:url(
 https://media.geeksforgeeks.org/wp-content/uploads/20210628092647/bgimage.jpg
            )">
              
            <div class="h-64 w-64"></div>
        </div>
    </div>
</body>
  
</html>

Saída:

bg-scroll