Esta clase acepta más de un valor en Tailwind CSS . Todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad background-position de CSS . Esta clase se utiliza para repetir la imagen de fondo tanto horizontal como verticalmente. También decide si la imagen de fondo se repetirá o no.
Clases de repetición de fondo:
- bg-repetir
- bg-sin-repetir
- bg-repetir-x
- bg-repetir-y
- bg-repetir-ronda
- bg-repetir-espacio
bg-repeat: esta clase se utiliza para repetir la imagen de fondo tanto horizontal como verticalmente. La última imagen se recortará si no cabe en la ventana del navegador.
Sintaxis:
<element class="bg-repeat">...</element>
Ejemplo:
HTML
<!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 Repeat Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-repeat bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> </body> </html>
Producción:
bg-no-repeat: Esta clase se usa para no repetir la imagen de fondo tanto horizontal como verticalmente.
Sintaxis:
<element class="bg-no-repeat">...</element>
Ejemplo:
HTML
<!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 no Repeat Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-no-repeat bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> </body> </html>
Producción:
bg-repeat-x: Esta clase se usa para repetir la imagen de fondo tanto horizontalmente.
Sintaxis:
<element class="bg-repeat-x">...</element>
Ejemplo:
HTML
<!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 Repeat X Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-repeat-x bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> </body> </html>
Producción:
bg-repeat-y: Esta clase se usa para repetir la imagen de fondo tanto verticalmente.
Sintaxis:
<element class="bg-repeat-y">...</element>
Ejemplo:
HTML
<!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 Repeat Y Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-repeat-y bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> </body> </html>
Producción:
bg-repeat-round: esta clase se usa para repetir la imagen de una manera que se ajuste al contenedor sin ningún espacio adicional entre las imágenes.
Sintaxis:
<element class="bg-repeat-round">...</element>
Ejemplo:
HTML
<!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 Repeat Round Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-repeat-round bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> </body> </html>
Producción:
bg-repeat-space: esta clase se usa para repetir la imagen de una manera que se ajuste al contenedor con el espacio adicional requerido entre las imágenes.
Sintaxis:
<element class="bg-repeat-space">...</element>
Ejemplo:
HTML
<!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 Repeat Space Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-repeat-space bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA