Tamaño de fondo de Tailwind CSS

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 CSS background-size . Esta clase se utiliza para establecer el tamaño de la imagen de fondo.

Clases de tamaño de fondo:

  • bg-auto
  • bg-portada
  • bg-contener

bg-auto: se utiliza para establecer la clase de tamaño de fondo en su valor predeterminado. Se utiliza para mostrar la imagen de fondo a su tamaño original.

Sintaxis:

<element class="bg-auto">...</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 Size Space Class</b> 
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
    <div class="bg-no-repeat bg-auto bg-center 
                bg-green-200 w-full h-48 border-2"
         style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)">
    </div>
  
    </div> 
</body> 
</html>

Producción:

bg-cover: se utiliza para cambiar el tamaño de la imagen de fondo para cubrir un elemento contenedor completo.

Sintaxis:

<element class="bg-cover">...</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 Size Space Class</b> 
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
    <div class="bg-no-repeat bg-cover bg-center 
                bg-green-200 w-full h-48 border-2"
         style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)">
    </div>
  
    </div> 
</body> 
</html>

Producción:

bg-contain: Se utiliza para contener la imagen de fondo dentro del contenedor mediante el encogimiento.

Sintaxis:

<element class="bg-contain">...</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 Size Space Class</b> 
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
    <div class="bg-no-repeat bg-contain bg-center 
                bg-green-200 w-full h-48 border-2"
         style="background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *