> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# ImageBackground

> Learn how to use ImageBackground with Uniwind className props

## Overview

The `ImageBackground` component displays an image as a background with children rendered on top. Uniwind provides className prop support for styling this component.

## Styling Convention

<Info>
  **For `style` props:** Use regular Tailwind classes directly (e.g., `className="p-4"`).

  **For non-style props** (like `color`): Use the `accent-` prefix (e.g., `colorClassName="accent-blue-500"`).
</Info>

<Warning>
  **Since 1.6.2:** Passing a className without the `accent-` prefix to a color prop will log a warning to the development console.
</Warning>

## Uniwind Bindings

<ParamField path="className" type="string">
  Maps to the `style` prop. Use any Tailwind utility classes.
</ParamField>

<ParamField path="imageClassName" type="string">
  Maps to the `imageStyle` prop. Use regular Tailwind classes (no `accent-` prefix needed).
</ParamField>

<ParamField path="tintColorClassName" type="string">
  Maps to the `tintColor` prop. Requires `accent-` prefix for color values.
</ParamField>

## Usage Example

```tsx theme={null}
import { ImageBackground, Text } from 'react-native'

<ImageBackground
  source={{ uri: 'https://example.com/bg.jpg' }}
  className="flex-1 justify-center items-center"
  imageClassName="opacity-50"
  tintColorClassName="accent-blue-500 dark:accent-blue-700"
>
  <Text className="text-white text-2xl font-bold">
    Content here
  </Text>
</ImageBackground>
```