Skip to main content

Background

Utility class to organize and implement background props

Read all background utilities

Background color​

Light mode only
<article class="card p-x-6 bg-yellow-100 bg-yellow-200 ">
  <span class="badge badge-icon-md bg-yellow-300 lime-900 m-b-8">
    <svg></svg>
  </span>
  <div class="flex flex-column ">
    <p class=" font-medium m-b-2 font-size-sm line-h-xs">
      Customize sites with style agnostic library
    </p>
  </div>
</article>
With dark mode
<article
  class="card p-x-6 bg-yellow-100 bg-yellow-200 dark-bg-gray-800 dark-bg-gray-700"
>
  <span class="badge badge-icon-md bg-yellow-300 dark-bg-yellow-800 dark-white lime-900 m-b-8">
    <svg></svg>
  </span>
  <div class="flex flex-column ">
    <p class=" font-medium m-b-2 font-size-sm line-h-xs">
      Customize sites with style agnostic library
    </p>
  </div>
</article>
.bg-green-400 {
  background-color: var(--rbrh-green-400);
}
.bg-orange-400 {
  background-color: var(--rbrh-orange-400);
}
[data-theme="dark"] .dark-bg-red-400 {
  background-color: var(--rbrh-red-400);
}
[data-theme="dark"] .dark-bg-blue-400 {
  background-color: var(--rbrh-blue-400);
}
Class selectorsTypeProperties & values
.bg-gray-700light modebackground-color: 1px solid var(--rbrh-gray-700);
.bg-blue-700light modebackground-color: 1px solid var(--rbrh-blue-700);
[data-theme="dark"] .dark-bg-green-400dark modebackground-color: 1px solid var(--rbrh-green-400);
[data-theme="dark"] .dark-bg-red-400dark modebackground-color: 1px solid var(--rbrh-red-400);

Background size​

Background - cover​

<div
  class="w-75 h-24 bg-cover radius-sm"
  style="background-image:url(https://images.unsplash.com/photo-1661595675376-83b51c5a0963?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=871&amp;q=80)"
></div>

Background - contain​

<div
  class="w-75 h-24 bg-cover radius-sm"
  style="background-image:url(https://images.unsplash.com/photo-1661595675376-83b51c5a0963?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=871&amp;q=80)"
></div>
.bg-auto {
  background-size: auto;
}
.bg-cover {
  background-size: cover;
}
.bg-contain {
  background-size: contain;
}