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