---
title: Setting a component's background image
---

import ImageSpotlight from '~/components/plugins/ImageSpotlight';
import { SnackInline} from '~/ui/components/Snippet';

The `ImageBackground` component lets you display an image as the background of another component in Expo and React Native apps. For example, you can set the background image of a screen in your app with `ImageBackground` inside the screen's container view.

This component is conceptually similar to CSS's `background-image` stylesheet property and the `backgroundImage` DOM style property.

## How to use ImageBackground

The `ImageBackground` component accepts mostly the same props as the `Image` component with a few differences. The `style` prop is applied to a view that wraps an inner image; the `imageStyle` prop is applied to the image itself. The `imageRef` prop also is applied to the inner image.

## Example

<SnackInline label="Using ImageBackground component">

{/* prettier-ignore */}
```js
import React from 'react';
import { /* @info Import ImageBackground from react-native */ ImageBackground/* @end */, StyleSheet, Text, View } from 'react-native';

const image = { uri: "https://docs.expo.dev/static/images/tutorial/splash.png" };

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} style={styles.image}>
      /* @info Nest your content inside of the ImageBackground component */
      <Text style={styles.text}>Elements</Text>
      <Text style={styles.text}>in Front of</Text>
      <Text style={styles.text}>Background</Text>
    /* @end */
    </ImageBackground>
  </View>
);

const styles = StyleSheet.create({
  container: {
    /* @info Make the containing view fill the screen */
    flex: 1,
    /* @end */
    flexDirection: 'column',
  },
  image: {
    /* @info Make the image fill the containing view */
    flex: 1,
    /* @end */
    /* @info Scale up the image to fill the container, preserving aspect ratio */
    resizeMode: 'cover',
    /* @end */
    justifyContent: 'center',
  },
  text: {
    color: 'white',
    fontSize: 42,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: '#000000a0',
  },
});

export default App;
```

</SnackInline>

The example above renders a screen like this:

<ImageSpotlight
  style={{ maxWidth: 276 }}
  src="/static/images/imagebackground-example.png"
  alt="Text rendered on top of an image background"
/>