HomeGuidesReferenceLearn
ArchiveExpo SnackDiscord and ForumsNewsletter

Set a component's background image

Edit this page

Learn how to use ImageBackground component to set a component's background image.

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

Using ImageBackground component
import { ImageBackground, StyleSheet, Text, View } from 'react-native';

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

export default function App() {
  return (
  <View style={styles.container}>
    <ImageBackground source={image} style={styles.image}>
      <Text style={styles.text}>Elements</Text>
      <Text style={styles.text}>in Front of</Text>
      <Text style={styles.text}>Background</Text>
    </ImageBackground>
  </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  image: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
  },
  text: {
    color: 'white',
    fontSize: 42,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: '#000000a0',
  },
});

The example above renders a screen as following: