Taille, position et répétition de l’arrière-plan
Contrôlez l’affichage des images d’arrière-plan avec les utilitaires bg-cover, bg-contain, bg-center et bg-no-repeat.
Taille, position et répétition de l’arrière-plan est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Background Images in Tailwind
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.
<div
style="background-image: url('hero.jpg');"
class="w-full h-64 bg-cover bg-center bg-no-repeat">
</div>bg-cover vs bg-contain
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.
<!-- Full-bleed hero: bg-cover -->
<div style="background-image: url('hero.jpg');" class="h-96 bg-cover bg-center">
<!-- Image fills the entire div, may be cropped -->
</div>
<!-- Logo background: bg-contain -->
<div style="background-image: url('logo.svg');" class="h-32 w-32 bg-contain bg-center bg-no-repeat">
<!-- Image fits inside without cropping -->
</div>bg-auto and Custom Sizes
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.
<!-- Pattern tile at natural size -->
<div style="background-image: url('pattern.png');" class="h-64 bg-auto bg-repeat">
</div>
<!-- Custom background size via arbitrary value -->
<div style="background-image: url('texture.jpg');" class="h-64 bg-[length:200px_200px] bg-repeat">
</div>Background Position Utilities
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.
<!-- Show the top of the image (portrait person photo) -->
<div style="background-image: url('person.jpg');" class="h-48 bg-cover bg-top"></div>
<!-- Show the center (landscape scenery) -->
<div style="background-image: url('landscape.jpg');" class="h-48 bg-cover bg-center"></div>
<!-- Show the bottom (ground-level details) -->
<div style="background-image: url('detail.jpg');" class="h-48 bg-cover bg-bottom"></div>Arbitrary Background Position
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.
<!-- Team member card: position face in frame -->
<div
style="background-image: url('team-member.jpg');"
class="w-32 h-32 rounded-full bg-cover bg-[center_20%]">
</div>Background Repeat Utilities
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.
<!-- Tiled pattern background -->
<div style="background-image: url('dots.png');" class="h-64 bg-repeat">
</div>
<!-- Single decorative image in corner -->
<div style="background-image: url('corner-decor.svg');" class="h-64 bg-no-repeat bg-bottom-right">
Main content here
</div>Background Attachment: Fixed Parallax
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.
<!-- Parallax section -->
<div
style="background-image: url('mountain.jpg');"
class="h-96 bg-fixed bg-cover bg-center">
<div class="h-full flex items-center justify-center">
<h2 class="text-4xl font-bold text-white drop-shadow-lg">Parallax Hero</h2>
</div>
</div>Responsive Background Behavior
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.
<div
style="background-image: url('hero.jpg');"
class="h-64 md:h-96 bg-cover bg-top md:bg-center">
</div>Building a Full-Page Background
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.
<div
style="background-image: url('bg.jpg');"
class="min-h-screen bg-cover bg-center bg-no-repeat relative">
<!-- Dark overlay for text contrast -->
<div class="absolute inset-0 bg-black/40"></div>
<!-- Content above overlay -->
<div class="relative z-10 flex items-center justify-center min-h-screen">
<h1 class="text-5xl font-bold text-white">Welcome</h1>
</div>
</div>Using object-fit on img vs Background
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.
<!-- Prefer img with object-fit for content images -->
<div class="relative h-64 overflow-hidden rounded-xl">
<img
src="hero.jpg"
alt="Mountain landscape at sunrise"
class="absolute inset-0 w-full h-full object-cover object-center"
loading="lazy"
/>
</div>Tailwind Background Shorthand Recap
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.
Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
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.
Questions Fréquemment Posées
La leçon « Taille, position et répétition de l’arrière-plan » est-elle gratuite ?
Oui — le texte complet de « Taille, position et répétition de l’arrière-plan » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Taille, position et répétition de l’arrière-plan » ?
Contrôlez l’affichage des images d’arrière-plan avec les utilitaires bg-cover, bg-contain, bg-center et bg-no-repeat. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Taille, position et répétition de l’arrière-plan » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- La palette de couleurs de Tailwind
- Dégradés d’arrière-plan
- Modificateurs d’opacité et de couleur
- Taille, position et répétition de l’arrière-plan