Background position

Tailwind CSS Background position

Use responsive background position utilities with TW elements. A tutorial on how to control the position of an element's background image.

Basic example

To control the position of an element’s background image use the .bg-{side} class.

bg-left-top

bg-top

bg-right-top

bg-left

bg-center

bg-right

bg-left-bottom

bg-bottom

bg-right-bottom

HTML

        
            
        <div
          class="... bg-left-top bg-no-repeat"
          style="background-image: url(...);"></div>
        <div
          class="... bg-top bg-no-repeat"
          style="background-image: url(...);"></div>
        <div
          class="... bg-right-top bg-no-repeat"
          style="background-image: url(...);"></div>
        <div
          class="... bg-left bg-no-repeat"
          style="background-image: url(...);"></div>
        <div
          class="... bg-center bg-no-repeat"
          style="background-image: url(...);"></div>
        <div
          class="... bg-right bg-no-repeat"
          style="background-image: url(...);"></div>
        <div
          class="... bg-left-bottom bg-no-repeat"
          style="background-image: url(...);"></div>
        <div
          class="... bg-bottom bg-no-repeat"
          style="background-image: url(...);"></div>
        <div
          class="... bg-right-bottom bg-no-repeat"
          style="background-image: url(...);"></div>

Background position

Tailwind CSS Background position

Basic example

Access restricted

To view this section you must have an active PRO account

Background position

Tailwind CSS Background position

Basic example

Related resources