1---
2title: Set a component's background image
3description: Learn how to use ImageBackground component to set a component's background image.
4---
5
6import ImageSpotlight from '~/components/plugins/ImageSpotlight';
7import { SnackInline } from '~/ui/components/Snippet';
8
9The `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.
10
11This component is conceptually similar to CSS's `background-image` stylesheet property and the `backgroundImage` DOM style property.
12
13## How to use `ImageBackground`
14
15The `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.
16
17## Example
18
19<SnackInline label="Using ImageBackground component">
20
21{/* prettier-ignore */}
22```js
23import React from 'react';
24import { /* @info Import ImageBackground from react-native */ ImageBackground/* @end */, StyleSheet, Text, View } from 'react-native';
25
26const image = { uri: "https://docs.expo.dev/static/images/tutorial/splash.png" };
27
28const App = () => (
29  <View style={styles.container}>
30    <ImageBackground source={image} style={styles.image}>
31      /* @info Nest your content inside of the ImageBackground component */
32      <Text style={styles.text}>Elements</Text>
33      <Text style={styles.text}>in Front of</Text>
34      <Text style={styles.text}>Background</Text>
35    /* @end */
36    </ImageBackground>
37  </View>
38);
39
40const styles = StyleSheet.create({
41  container: {
42    /* @info Make the containing view fill the screen */
43    flex: 1,
44    /* @end */
45    flexDirection: 'column',
46  },
47  image: {
48    /* @info Make the image fill the containing view */
49    flex: 1,
50    /* @end */
51    /* @info Scale up the image to fill the container, preserving aspect ratio */
52    resizeMode: 'cover',
53    /* @end */
54    justifyContent: 'center',
55  },
56  text: {
57    color: 'white',
58    fontSize: 42,
59    fontWeight: 'bold',
60    textAlign: 'center',
61    backgroundColor: '#000000a0',
62  },
63});
64
65export default App;
66```
67
68</SnackInline>
69
70The example above renders a screen as following:
71
72<ImageSpotlight
73  style={{ maxWidth: 276 }}
74  src="/static/images/imagebackground-example.png"
75  alt="Text rendered on top of an image background"
76/>
77