背景のサイズ、位置、繰り返し

Tailwind does not apply background images directly (since image URLs cannot be expressed as utility class names), but it provides full control over how background images behave: their size, position, and repeat behavior. You typically set the image via an inline style or a custom CSS class, then use Tailwind utilities to control its display properties.

bg-cover and bg-contain are the two most important background size utilities. bg-cover scales the image as large as possible so the element is fully covered, cropping if necessary — ideal for hero images and full-bleed backgrounds. bg-contain scales the image to fit entirely within the element without cropping — ideal for logos and icons used as backgrounds.

bg-auto renders the background image at its natural pixel size — no scaling. This is useful when you want a precise, unscaled texture or pattern. For custom sizes that are not cover or contain, use arbitrary values: bg-[length:50%_auto] sets background-size to 50% width and auto height, useful for half-width background patterns.

Background position controls where the image is anchored within its container. Tailwind provides nine positions matching a 3x3 grid: bg-top, bg-bottom, bg-left, bg-right, bg-center, and the four corners bg-top-left, bg-top-right, bg-bottom-left, bg-bottom-right. When used with bg-cover, position determines which part of the image is visible when cropping occurs.

For positions not covered by the nine presets, use arbitrary values: bg-[center_25%] anchors the image at the horizontal center and 25% down from the top. This is useful for carefully positioning a subject (like a face in a team photo) within a cropped card image. Always test how the image looks at different viewport sizes when using precise positions.

Background repeat controls whether the image tiles to fill the container. bg-repeat tiles in both directions (default behavior). bg-no-repeat shows the image exactly once. bg-repeat-x tiles only horizontally and bg-repeat-y only vertically. bg-repeat-round and bg-repeat-space offer advanced tiling that avoids cutting off tiles at the edges.

bg-fixed makes the background image fixed relative to the viewport rather than the element — as the user scrolls, the content moves but the background stays still, creating a parallax effect. bg-local makes the background scroll with the element's content. bg-scroll (default) scrolls the background with the element but not with the content.

Background behavior often needs to change at different screen sizes. On mobile, an image might be better centered differently or use a smaller crop. Apply responsive prefixes to any background utility: bg-top md:bg-center centers the image on desktop but shows the top portion on mobile. This is important for maintaining the right focal point of background images at every viewport width.

A full-page background image is achieved by setting the image on a container that fills the viewport: min-h-screen for height, bg-cover bg-center bg-no-repeat bg-fixed for image behavior. Add a relative container inside for content so it layers above the background. Always add a semi-transparent overlay layer to ensure text remains readable over the image.

When possible, use an <img> tag with object-cover and object-position instead of background images — this is better for accessibility (alt text), SEO (indexable images), and performance (browser-native lazy loading). Reserve background images for decorative patterns, textures, and cases where the image has no semantic meaning.

Here is a quick reference for the background utility families: bg-cover / bg-contain / bg-auto for size, bg-center / bg-top / bg-bottom / bg-left / bg-right for position, bg-no-repeat / bg-repeat / bg-repeat-x / bg-repeat-y for tiling, and bg-fixed / bg-local / bg-scroll for attachment. Most hero sections use bg-cover bg-center bg-no-repeat as a reliable baseline.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: bg-cover scales to fill the container while bg-contain fits inside without cropping, bg-center / bg-top / bg-bottom control which part of the image is anchored in the frame, and bg-fixed creates a parallax effect while bg-no-repeat prevents tiling. Next up we master Tailwind's spacing scale for margin and padding.