CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
Roman
Roman

Reputation: 763

background-image in react component

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 it of course, and there are solutions but for some reason, I can't see that image.

P.S.1: even changing that Material UI 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>
        )
    }
}

Upvotes: 33

Views: 167002

Answers (7)

Dave Chinweike
Dave Chinweike

Reputation: 1

import React from 'react';

import Paper from 'material-ui/Paper';

import Image from '../pathToImage/main.jpg';


export default function Home(){
        return(
            <Paper sx={{ backgroundImage: `url(${Image.src})` }}>

            </Paper>
        )
}

This is what worked for me;

  • Import the image as module
  • Pass Image.src to the background-image: url()

Upvotes: 0

M.Islam
M.Islam

Reputation: 1680

You can you sx props in MUI v5

import React from 'react';

import Paper from 'material-ui/Paper';

import Image from '../img/main.jpg';


export default class Home extends React.Component{
    render(){
        return(
            <Paper sx={{ backgroundImage: `url(${Image})` }}>

            </Paper>
        )
    }
}

Upvotes: 0

Meli
Meli

Reputation: 477

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>

Upvotes: 10

Meir Snyder
Meir Snyder

Reputation: 819

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}>

Upvotes: 4

Roman
Roman

Reputation: 763

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>
        )
    }
}

Upvotes: 24

Eugene R. Wang
Eugene R. Wang

Reputation: 151

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>
        )
    }
}

Upvotes: 2

Romain Le Qllc
Romain Le Qllc

Reputation: 896

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>
        )
    }
}

Upvotes: 70

Related Questions