Repetição de plano de fundo no Tailwind CSS

Neste artigo, exploraremos como usar a propriedade de repetição de plano de fundo do Tailwind com exemplos para criar uma imagem de plano de fundo visualmente atraente.

O Tailwind CSS é uma estrutura popular de utilitário de primeiro CSS que permite que os desenvolvedores da Web criem interfaces de usuário responsivas e eficientes rapidamente.

A propriedade background-repeat é uma propriedade CSS que controla como uma imagem de fundo é repetida.

Por padrão, uma imagem de plano de fundo será repetida vertical e horizontalmente para preencher todo o contêiner. No entanto, você pode querer controlar como a imagem se repete para criar uma aparência única.

Repetição de fundo do vento de cauda

Um dos muitos recursos oferecidos pelo Tailwind é a capacidade de estilizar imagens de plano de fundo usando CSS.

Índice-

Repetição de fundo do vento de cauda

Tailwind CSS oferece suporte a vários valores para esta classe.

As propriedades são todas descritas em forma de classe.

A propriedade CSS background-repeat é uma alternativa a ela.

A imagem de fundo é repetida horizontal e verticalmente com esta classe. Além disso, determina se a imagem de fundo será repetida ou não.

Sintaxe

<element class="bg-repeat"></element>

Aulas de repetição em segundo plano do Tailwind

Com o Tailwind, você pode usar várias classes para controlar como a imagem de fundo se repete, incluindo bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round e bg-repeat- espaço.

Vamos dar uma olhada em cada uma dessas classes.

  1. bg-repeat : Esta classe é usada para repetir a imagem de fundo vertical e horizontalmente. Este é o comportamento padrão quando nenhuma outra classe é usada.
  2. bg-no-repeat : Esta classe é usada para evitar que a imagem de fundo se repita. A imagem será exibida apenas uma vez.
  3. bg-repeat-x : Esta classe é usada para repetir a imagem de fundo horizontalmente. A imagem não será repetida verticalmente.
  4. bg-repeat-y : Esta classe é usada para repetir a imagem de fundo verticalmente. A imagem não será repetida horizontalmente.
  5. bg-repeat-round : Esta classe é usada para repetir a imagem de fundo para preencher o contêiner. No entanto, a imagem será reduzida para caber sem distorcer a imagem.
  6. bg-repeat-space : Esta classe é usada para repetir a imagem de fundo para preencher o container, mas o espaço entre as imagens será preenchido com a cor de fundo.

Para usar as classes de repetição de plano de fundo do Tailwind, você pode adicioná-las a qualquer elemento que tenha uma imagem de plano de fundo.

Por exemplo, digamos que você tenha um elemento HTML com uma classe de “bg-image” e uma imagem de fundo. Você pode usar a classe bg-repeat para fazer a imagem se repetir vertical e horizontalmente:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-bold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Repeat Class in Tailwind CSS</p>
<p class="font-medium text-gray-700 text-sm my-2">bg-repeat is being used</p>
<div class="bg-green-300 mx-16 space-y-4 p-2 justify-between">
<div class="bg-repeat bg-left-top bg-gray-200 w-full h-32 border-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:23% 40%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Como alternativa, você pode usar a classe bg-no-repeat para evitar que a imagem se repita:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-bold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Repeat Class in Tailwind CSS</p>
<p class="font-medium text-gray-700 text-sm my-2">bg-no-repeat is being used</p>
<div class="bg-gray-300 mx-16 space-y-4 p-2 justify-between">
<div class="bg-no-repeat bg-left-top bg-gray-200 w-full h-32 border-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:23% 40%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Usando a classe bg-repeat-x , a imagem de fundo é repetida apenas horizontalmente. O recorte ocorrerá se a última imagem não couber na janela do navegador:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-bold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Repeat Class in Tailwind CSS</p>
<p class="font-medium text-gray-700 text-sm my-2">bg-repeat-x is being used</p>
<div class="bg-gray-300 mx-16 space-y-4 p-2 justify-between">
<div class="bg-repeat-x bg-left-top bg-gray-200 w-full h-32 border-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:23% 40%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Com a classe bg-repeat-y , a imagem de fundo é repetida apenas verticalmente.

Ele será cortado se a última imagem não couber na janela do navegador.

Um exemplo será utilizado para demonstrar a aplicação da classe bg-repeat-y :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-bold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Repeat Class in Tailwind CSS</p>
<p class="font-medium text-gray-700 text-sm my-2">bg-repeat-y is being used</p>
<div class="bg-gray-300 mx-16 space-y-4 p-2 justify-between">
<div class="bg-repeat-y bg-left-top bg-gray-200 w-full h-32 border-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:23% 40%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

As imagens de fundo serão repetidas tantas vezes quanto possível sem serem cortadas por bg-repeat-round .

A primeira e a última imagem são fixadas em ambos os lados do elemento, com espaço em branco distribuído uniformemente entre elas.

Este exemplo usa a classe bg-repeat-round para indicar seu uso:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-bold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Repeat Class in Tailwind CSS</p>
<p class="font-medium text-gray-700 text-sm my-2">bg-repeat-round is being used</p>
<div class="bg-gray-300 mx-16 space-y-4 p-2 justify-between">
<div class="bg-repeat-round bg-left-top bg-gray-200 w-full h-32 border-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:23% 40%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Quando a classe bg-repeat-space é usada, a imagem de fundo preenche todo o espaço (não há lacunas).

Para indicar sua aplicação, este exemplo usa bg-repeat-round :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-bold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Repeat Class in Tailwind CSS</p>
<p class="font-medium text-gray-700 text-sm my-2">bg-repeat-space is being used</p>
<div class="bg-gray-300 mx-16 space-y-4 p-2 justify-between">
<div class="bg-repeat-space bg-left-top bg-gray-200 w-full h-32 border-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:23% 40%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A propriedade de repetição de plano de fundo do Tailwind fornece uma maneira simples e eficaz de estilizar imagens de plano de fundo.

Com classes como bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round e bg-repeat-space, você pode controlar facilmente como a imagem de fundo se repete para criar um interface de usuário visualmente atraente .

Esteja você trabalhando em um site simples ou em um aplicativo da Web complexo, as classes de repetição em segundo plano do Tailwind podem ajudá-lo a criar uma aparência única e profissional com o mínimo de esforço.

Agora está claro para você o que são as classes de repetição em segundo plano do Tailwind e como usá-las.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.