Solution
To add a background image in styled components, you have to define a styled div element using the styled function from styled components, we will use a background image with css class and set-top left and set height: 200px and width: 200px.
Snippet
In this snippet, we will see add background image in styled components and use css style background : url (’logo192.png’).
const StyledDiv = styled.div`
background: url('logo192.png') no-repeat top left;
background-size: contain;
height: 200px;
width: 200px;
`;
<StyledDiv className="App">
</StyledDiv>
Example
In this example, we will create styled componets library and uses it to define a new component called StyledDiv,as the background image set file logo192.png.
Let’s start coding…
App.js
import React from "react";
import styled from "styled-components";
const StyledDiv = styled.div`
background: url('logo192.png') no-repeat top left;
background-size: contain;
height: 200px;
width: 200px;
`;
export default function App() {
return (
<StyledDiv className="App">
</StyledDiv>
);
}
Output