2

I'm stuck on how to correctly reference an image for the background of an component.

My project structure is:

//src
  //images
    //homepage
      //homepage.png
  //styles
    //base
      //components
        //homepage.scss

How do i reference homepage.png in the homepage.scss and use background-image: url('some-path');

Strahinja Ajvaz
  • 2,521
  • 5
  • 23
  • 38
  • React doesn't know anything about CSS or SASS. Might be better to ask how to reference an image with a relative path in CSS. – Jacob Feb 27 '18 at 00:02
  • 1
    Possible duplicate of [Using relative URL in CSS file, what location is it relative to?](https://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to) – Jacob Feb 27 '18 at 00:06

1 Answers1

-2

The same way you would do this in regular html/css. Simply add a className to the top parent div in your return function, then reference it in your scss with the background-img.

Here is a codepen demonstrating this: https://codepen.io/wnamen/pen/QQJNVe

JS

var BackgroundImage = React.createClass({
  render:function(){
    return (<div className="img"></div>)
  }  
});

ReactDOM.render(
  <BackgroundImage/>,
  document.getElementById('app')
);

CSS

.img {
  background-image: url('https://source.unsplash.com/1223x840/?nature')
}
wnamen
  • 550
  • 3
  • 12