Explore the diverse Background Utilities of JTB_MD, classes that allow you to manipulate backgrounds of elements with customizable options for a vibrant and visually appealing user experience.

About

Background utilities is a class group designed to update the backgrounds of elements. With its customizable and responsive structure, it aims to fulfill all the background-related features you need in your projects through simple class assignments.

In JTB_MD, the assigned classbase for all background classes is .jtbBG.

Coloring

Background coloring classes work with default color palettes of the library as outlined in the Colors section. To set the background color of any element using library classes, simply append the color name to the class base along with its weight:

.jtbBG-purple4.jtbBG-blue4.jtbBG-aqua4.jtbBG-green4.jtbBG-lime4.jtbBG-yellow4.jtbBG-orange4.jtbBG-volcano4.jtbBG-red4.jtbBG-neutral4.jtbBG-white4.jtbBG-black4

                            <!-- Element with background color blue (weight = 4) -->
<div class='jtbBG-blue4'>...</div>

Transparency

In JTB_MD, a special class is defined to enable you to create transparent backgrounds for your elements:

.jtbBG-transparent

This div has .jtbBG-transparent class.

                            <!-- Element with transparent background -->
<div class='jtbBG-transparent'>...</div>

Responsiveness

You can make your element's background respond differently on various screen sizes. Activate this utility by adding the corresponding screen breakpoint (defined in Breakpoints seciton) at the end of the class with a hyphen (-):

Refer to the table below to understand which parts of the utility group can be used with screen breakers:

Part of group	Responsiveness	Example class
Coloring	Active	`.jtbBG-blue4-xxl`
Transparency	Active	`.jtbBG-transparent-xxl`