Tailwind CSS - Background Origin

Previous
Quiz
Next

Tailwind CSS Background Origin is a utility that specifies from where the background property originated within an element.

Tailwind CSS Background Origin Classes

The following is the list of Tailwind CSS Background Origin Classes that are used to set the origin of a background.

Class CSS Properties
bg-origin-border background-origin: border-box;
bg-origin-padding background-origin: padding-box;
bg-origin-content background-origin: content-box;

Functionality of Tailwind CSS Background Origin Classes

  • bg-origin-border: This class is used to origin the background image or color from the border box, including border and padding.
  • bg-origin-padding: This class is used to origin the background image or color from the padding box, excluding borders.
  • bg-origin-content: This class is used to origin the background image or color from the content box, excluding border and padding.

Tailwind CSS Background Origin Example

The following example will illustrate the different utility of background origin classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Background Origin Border, Padding, and Content Classes
    </h2>
    <div class="flex gap-3">
        <div class="w-32 h-32 border-4 border-green-300 border-dashed
                    bg-clip-border p-4 text-white" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/8654/course_8654_image.png?v=1.0')">
            Background-origin-border
        </div>
        <div class="w-32 h-32 border-4 border-green-300 border-dashed
                    bg-clip-padding p-4 text-white"
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/8654/course_8654_image.png?v=1.0')">
            Background-origin-padding
        </div>
        <div class="w-32 h-32 border-4 border-green-300 border-dashed
                    bg-clip-content bg-green-600 p-4 text-white"
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/8654/course_8654_image.png?v=1.0')">
            Background-origin-content
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next