Tailwind CSS
/Intermediate
Background Images
Definition
Utilities for controlling an element's background image, size, position, and repeating.
Explain Like I'm New
When you want an image to act as the 'wallpaper' for a div, rather than using an `<img>` tag. You then use `bg-cover` to make sure it fills the div without stretching, and `bg-center` to focus on the middle of the image.
Real World Example
A massive Hero Banner at the top of a webpage featuring a beautiful stock photo spanning the full width of the browser.
Common Use Cases
- •Hero sections
- •Patterned backgrounds
- •Avatars
Interactive Example
Interview Questions
basic
- What class guarantees a background image will fill the entire container without distorting its aspect ratio?
intermediate
- How do you apply a specific image URL in Tailwind without modifying the `tailwind.config.js`?