ImageBackground
- React Native course
- Beginner
- Lesson 68/116
- 5 min
Learn background images with ImageBackground.
What is ImageBackground?
ImageBackground lets you place text or other components on top of an image. Like Image it takes a source; unlike Image it also allows children.
Typical usage: open <ImageBackground source={'{...}'}>, put <Text> or <View> inside, then close with </ImageBackground>. The image stays in the back, the children in front.
The difference from Image: Image is a self-closing tag (ends with />), while ImageBackground is a container (with opening and closing tags). That is why it accepts children.
Using ImageBackground
ImageBackground takes source and style props. You must set width and height in style; otherwise the image is invisible. Children stack on top of the image automatically.
Example: open <ImageBackground source={'{ uri: 'https://.../bg.png' }'} style={'{ width: 300, height: 200 }'}>, put <Text style={'{ color: 'white' }'}>Hello</Text> inside. The text appears white over the image.
To improve readability you can add a semi-transparent layer. You do that with rgba colors or a second <View>.
Practice Write a card with a background image
Write an <ImageBackground>. Give it source={'{ uri: 'https://example.com/bg.png' }'} and a style with width: 300 and height: 200. Put a white <Text> inside. Export the App function.
Starter code
import { ImageBackground, Text } from 'react-native';
// write the card with a background image hereSample solution
function App() {
return (
<ImageBackground
source={{ uri: 'https://example.com/bg.png' }}
style={{ width: 300, height: 200 }}>
<Text style={{ color: 'white' }}>Hello</Text>
</ImageBackground>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What can ImageBackground hold?
- Children like text or View
- Only a color
- Only a number Correct answer
- Only an empty value
Explanation: ImageBackground has opening and closing tags and takes children.
2 Import ImageBackground
import { ____ } from 'react-native';import { ImageBackground } from 'react-native';Explanation: ImageBackground is imported from the react-native package.
3 ImageBackground parts
| Term | Meaning |
|---|---|
source |
Background image |
children |
Foreground items |
style |
Box size |
color: white |
Text color |