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

background, image

codesandbox