Correct way to set background image URL in React JSX object

Question

I would like to set the background image in my style JS object. For some reason the following is not working, no image appears and no errors?

React

const homeStyle = {
    width: '100%',
    height: '100vh',
    backgroundImage: 'url("../../assets/images/home.png")',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    paddingTop: '160px',
    paddingLeft: '400px'
  };

 <div style={homeStyle}></div>

Any idea's?

You need to do some debugging. Use the developer tools in your browser. Use the element inspector to look at the CSS applied to the element. Do you see the properties? So they have the values you expect? Are any of them having the effect you expect? (e.g. the dimensions should show up in the tool). Use the Network tab. Do you see the HTTP request for the image file? Does it get the response you expect? With the right data, content-type, and status code? — Quentin
– Quentin, Commented Jun 22, 2020 at 0:14

Marik Ishtar · Accepted Answer · 2020-06-22 00:16:06Z

3

try to import the image with

import Background from '../../assets/images/home.png';

and replace the backgroundImage property with

backgroundImage: `url(${Background})`,

answered Jun 22, 2020 at 0:16

Marik Ishtar

3,0691 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Correct way to set background image URL in React JSX object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related