2

I'm creating a simple React app (using create react app as a starting point) in which the App.js returns the following:

  return (
    <div className="App">
      <NavBar />
      <Main />
    </div>
  );
}

export default App;

I'm attempting to add an image to Main with the following:

  return (
    <div className="bg">      
      <LogInSignUpModal />
    </div>
  );
}

export default Main;

In the file Main.css I have the following:

    /* The image used */
    background-image:  url("../../images/WorkoutRack.jpg");

    /* Full height */
    height: 100%;
    width: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

Unfortunately the image won't appear in the main component (the main component is supposed to take up the entire page below the NavBar. I've tried many different solutions found in other StackOverflow responses but none have worked. What am I missing here?

Daniel S.
  • 113
  • 1
  • 12
  • 1
    Make sure **all** elements wrapping this `bg` element have their height set to 100%. This includes the `html`, `body` and `#root`. Open the dev console and any element that is wrapping this `bg` element should be set to `height: 100%;`. – Matt Carlotta Dec 26 '19 at 16:52
  • try **background** instead **background-image** – Nagesh Fultambkar Dec 26 '19 at 17:22
  • @MattCarlotta Thank you - this appears to have worked! I have index.html (which has #root) stored in public folder while all the components are stored in a src folder. Which is best for #root: setting height 100% in an external imported CSS file or setting it within the index.html? – Daniel S. Dec 26 '19 at 18:10
  • 1
    @DanielS. Glad you figured it out. You should set the height in an external CSS stylesheet -- keep your `index.html` as clean as possible. If you're wondering why this works, in simple terms, parent elements with undefined height and widths are 0px by 0px. So, when a child is set at 100% (height or width)... it's 100% of 0px. That's why you have to traverse the DOM tree and set all parent elements to be 100% of the view -- unless, you're defining a height/width in `px`/`em`/`rem`...etc, then you only need to style the closest parent). – Matt Carlotta Dec 26 '19 at 18:25

3 Answers3

1

Hi we can load the image in couple ways in react components itself

import react from 'react'
import imageName from './location/of/image'

class App extends react.Component{
render(){
return(
<img src={imageName} alt="imagename"/>
}
}

2nd way is to using require All code are similar but instead of importing, require it

import react from 'react'
Const imageName = require ('./location/of/image')

class App extends react.Component{
render(){
return(
<img src={imageName} alt="imagename"/>
}
}
Nandha Frost
  • 116
  • 1
  • 14
0

First check this answer: React won't load local images If that was not fault, check your parent style or use px for with and height.

Fatemeh Qasemkhani
  • 1,942
  • 1
  • 15
  • 25
0

Images included in css files are going to taken from the public folder, not the src one.

So make your url relative to where the files are stored within the public folder, including the css in the public file too should make it even easier.

If someone has doubts about this, I'll gladly reply to you in the comments.

Some Dev
  • 185
  • 1
  • 9