Background Images

Positioning

We can specify how the background image is positioned in the box. This tells CSS which side of the image should touch which side of the box. Tailwind provides nine utilities. The first one, .bg-center, centers the image in the center of the box.

There are four direction utilities:

.bg-center

• .bg-left
• .bg-right
• .bg-top
• .bg-bottom

There are four corner utilities:

• .bg-left-top
• .bg-left-bottom
• .bg-right-bottom
• .bg-right-top

Tiling

If the image is smaller than the box, we can tile it. The .bg-repeat utility tiles the image horizontally and vertically. To go in only one direction, we use .bg-repeat-x or .bg-repeat-y. The .bg-no-repeat utility resets everything.

Two special options, .bg-repeat-round and .bg-repeat-space, change how the tiling places the images. The default repeat will put a partial image at the end of the box. If we choose .bg-repeat-space, there will be no partial image, and any whitespace will be distributed evenly between the tiled images. If we choose .bg-repeat-round, there will be no whitespace because each image will be stretched to cover the whitespace.