How do I import a png image as a background for a component in React?

Question

The earth.png image is in the same folder as the src folder, the src folder contains various components. I have an app.js file in the main app folder which also contains the src folder. This is the component I have in the app.js file, I tried to import the earth.png file and use it as a background for the React MDL component but it didn't work. Where am I going wrong?


import React, {Component} from 'react';
import './App.css';
import {Layout, Header, Navigation, Drawer, Content} from 'react-mdl';
import Earth from './earth.png';
import Main from './components/main';
import { Link } from 'react-router-dom';

class App extends Component {
  render() {
  return (

<div style={{height: '300px', position: 'relative'}}>
    <Layout style={{background: 'source = {require{/earth.png}} center / cover'}}>
        <Header transparent title="Continental Coders" style={{color: 'black'}}>
            <Navigation>
                <a href="/aboutme">About me</a>
                <a href="/projects">Projects</a>
                <a href="/resume">Resume</a>
                <a href="/contact">Contact</a>
            </Navigation>
        </Header>
        <Drawer title="Title">
            <Navigation>
                <Link to="/aboutme">About Us</Link>
                <Link to="/projects">Projects</Link>
                <Link to="/resume">Resume</Link>
                <Link to="/contact">Contact</Link>
            </Navigation>
        </Drawer>
        <Content>
        <div className="page-content">
        <Main/>
        </div>
       </Content>
    </Layout>
</div>
);
}
}

export default App;

Does this answer your question? [Setting a backgroundImage With React Inline Styles](https://stackoverflow.com/questions/39195687/setting-a-backgroundimage-with-react-inline-styles) — Emile Bergeron, Nov 20 '19 at 19:25

score 1 · Accepted Answer · answered Nov 20 '19 at 18:23

1

When you import the image, assuming you have the appropriate loaders, it's bringing in the file path, so you can use it like you would any other URL:

style={{ background: `url(${Earth})`}}

answered Nov 20 '19 at 18:23

Chris B.

5,477
1
12
30

Thanks, how do I add the "center / cover" css properties to it? – jibjab3344 Nov 20 '19 at 19:11
Not sure of the syntax for the combined property, but ```backgroundSize: 'cover`, backgroundPosition: 'center'``` should work. – Chris B. Nov 20 '19 at 19:14

How do I import a png image as a background for a component in React?

1 Answers1