Unlike on the web, there is no CSS background-image – React Native solves this with the ImageBackground component, which renders an image AND overlaid child elements at the same time.

1. Description

ImageBackground is at its core a regular Image that internally positions its children absolutely on top of itself (similar to CSS position: relative on the container plus position: absolute on the children). resizeMode controls how the image scales when it doesn't exactly match the available area.

2. Short example

<ImageBackground
  source={{ uri: 'https://picsum.photos/800' }}
  style={{ flex: 1 }}
>
  <Text style={{ color: 'white' }}>On top of the image</Text>
</ImageBackground>

3. Complete project: a profile cover image

npx create-expo-app background-image-demo
cd background-image-demo

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

export default function App() {
  return (
    <View style={styles.container}>
      <ImageBackground
        source={{ uri: 'https://picsum.photos/id/1015/800/500' }}
        style={styles.header}
        resizeMode="cover"
      >
        <View style={styles.overlay}>
          <Text style={styles.name}>Alex Sample</Text>
          <Text style={styles.role}>React Native Developer</Text>
        </View>
      </ImageBackground>
      <View style={styles.content}>
        <Text>More profile content goes here…</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  header: { height: 220, justifyContent: 'flex-end' },
  overlay: { backgroundColor: 'rgba(0,0,0,0.4)', padding: 16 },
  name: { color: 'white', fontSize: 22, fontWeight: 'bold' },
  role: { color: '#e5e7eb', fontSize: 14 },
  content: { padding: 16 },
});

4. Explanation

• resizeMode="cover" fills the whole area and crops any overflow (like CSS background-size: cover) – alternatives: "contain" (whole image visible, possibly with margins) and "stretch" (distorted to exact dimensions).
• The semi-transparent overlay View (rgba(0,0,0,0.4)) ensures white text stays readable on ANY background image – a common technique regardless of the actual image content.
• justifyContent: 'flex-end' on header pushes the overlay content to the bottom of the image area, a typical "hero image with title at the bottom" layout.
• For local images instead of a URL: source={{require('./assets/cover.jpg')}} (no uri key, see the "Fetch local JSON file" chapter for the difference between require and network sources).

5. Outputs