background-image in react component

Question

I'm building a page and I want a material-ui element to have a background image using background-image CSS property. I have googled for it of course, and there are solutions but for some reason I can't see that image.

P.S.1: even changing that MUI element to regular hasn't helped me at all.

P.S.2: when I'm using inside container it shows, but that's not what I want.

UPDATE1: Tried adding height and width to container, still no luck...

import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';


const styles = {
    paperContainer: {
        backgroundImage: `url(${"static/src/img/main.jpg"})`
    }
};

export default class Home extends React.Component{
    render(){
        return(
            <Paper style={styles.paperContainer}>

            </Paper>
        )
    }
}

Solution 1

I've found a fix for my case. Actually setting container height in pixels have helped.

Here's the code:

import React from 'react';


const styles = {
    paperContainer: {
        height: 1356,
        backgroundImage: `url(${"static/src/img/main.jpg"})`
    }
};

export default class Home extends React.Component {
    render() {
        return (
            <div style={styles.paperContainer}>
            </div>
        )
    }
}

Solution 2

You have to import the image as the following, using the relative path.

import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

import Image from '../img/main.jpg'; // Import using relative path


const styles = {
    paperContainer: {
        backgroundImage: `url(${Image})`
    }
};

export default class Home extends React.Component{
    render(){
        return(
            <Paper style={styles.paperContainer}>
                Some text to fill the Paper Component
            </Paper>
        )
    }
}

Solution 3

I got this to work for material-ui, where the padding on my parent element was 24px so I added 48px to the width of the background image to make it work...

const styles = {
   heroContainer: {
     height: 800,
     backgroundImage: `url(${"../static/DSC_1037.jpg"})`,
     backgroundSize: 'cover',
     backgroundPosition: 'center',
     width: `calc(100vw + 48px)`,
     margin: -24,
     padding: 24,
   }
  };
<Grid
    container
    direction="column"
    justify="flex-end"
    alignItems="right"
    style={styles.heroContainer} >
    <Grid item>Goes here</Grid>
</Grid>

Solution 4

Had the same issues while working with Material UI React and the Create React App. Here is the solution that worked for me. Note that I set up a webpack alias for the relative path

import BackgroundHeader from "assets/img/BlueDiamondBg.png"

const BackgroundHead = {
  backgroundImage: 'url('+ BackgroundHeader+')'
  }

<div style={BackgroundHead}>

Solution 5

Like Romainwn said, you need to import the image to the file. Make sure you use the relative path to parent, so instead of

static/src/img/main.jpg    #looks for static folder from current file location

Do

/static/src/img/main.jpg #looks for file from host directory:

Another hack to do it would be adding an inline style tag to the component:

import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

import Image from '../img/main.jpg'; // Import using relative path


export default class Home extends React.Component{
    render(){
        return(
            <Paper style="background:path/to/your/image;">

            </Paper>
        )
    }
}

View more solutions

Comments

[Roman]

Have not helped unfortunately :(

[Eugene Tsakh]

To be able to import and use images like this you need to use github.com/webpack-contrib/file-loader @Roman are you using it?

[Roman]

@EugeneTsakh yes I do have that dependency met. Bundle goes without an error. ("file-loader": "^0.11.2")

[Romain Le Qllc]

Mmmmh that is weird, it works on my simple create-react-app... Did you try to use the image in a simple <img src={Image} /> to see if the import works ? Oh I might have found it ! Did you put some text in your <Paper> just to check if my solution works ? I just updated my answer

[Roman]

I've posted an answer to this question already, however, I've just tried your solution too. Does not work for me :(

[Max Carroll]

yes I think if you created your app using create-react-app then install material ui, that should be all required, perhaps somethigns gone wrong with the setup of your app, maybe simpler todo create react app again and then npm start and fix it where it breaks, (I expect a few npm install package-name --save would be required. I think this is one of those circumstances when the scorched earth approach would be best