Setting the background in reactJS

Question

i'm new to ReactJs and my question may seem stupid to many of you, but i have a problem with setting the background. My React code is:

<header className="masthead ttt">
          <div className="overlay"></div>
          <div className="container">
            <div className="row">
              <div className="col-lg-8 col-md-10 mx-auto">
                <div className="site-heading">
                  <h1>Blog Name</h1>
                  <span className="subheading">blablablablabla</span>
                </div>
              </div>
            </div>
          </div>
        </header>

So basically i'm trying to set an image as background in my header , so i created a class .ttt and modified it to my css that way :

.ttt{
  background-image: url("../img/home-bg.jpg");
}

And finally here's the way the folders are set :

Am i doing anything wrong in my code ? Or there's another way of doing things in ReactJS! Thanks!

hmmm. Can you please replicate what you have so far in codepen or jsfiddle? Ill check it out. — AndrewL64, Jun 05 '18 at 16:15
Just try `/img/home-bg.jpg` , as it's already in public folder. And assuming, you installed the react using `create-react-app` — Dhaval Jardosh, Jun 05 '18 at 19:03
I tried but didn't work and yes i installed using the create-react-app command. The thing is when put my background-image into the masthead class it works fine but if i try to move it to the ttt class it doesn't work! — Hiimdjango, Jun 05 '18 at 20:15

score 1 · Accepted Answer · answered Jun 28 '18 at 11:20

So far what I understood from your problem is that you are not getting the image on the front-end. While checking it through developer options it must be pointing you to a blank div at the top of the screen. If that's the case then it is because that every background image needs some size to be displayed.

You can either give width and height or you can give background-size property as follows:

.ttt{
    background-image: url("../img/home-bg.jpg");
    width: 100%;
    height: 100%;  // giving height is not compulsary but just for good practice.
}

OR

.ttt{
    background-image: url("../img/home-bg.jpg");
    background-size: 100% 100%; // First value: {Width}   Second value: {Height}
}

This would resolve your issue.

score 0 · Answer 2 · edited Jun 06 '18 at 12:04

0

Use inline css in javascript like this:

import Background from '../img/home-bg.jpg'; // make sure path is correct

<header className="masthead" style={{ backgroundImage: `url(${Background})` }} >

ref Be mindful of using backgroundImage instead of background-image

edited Jun 06 '18 at 12:04

Fawaz

3,404
3
17
22

answered Jun 05 '18 at 17:07

Aditya

21
4

score 0 · Answer 3 · answered Aug 03 '21 at 06:49

0

Working for me

<div className="drag-dashboard" style={{ backgroundImage: `url(${config.DESTINATION_MEDIA_CDN+ "assets/icons_skining/upload_placeholder_skining.png"})`}}>
                                   </div>

answered Aug 03 '21 at 06:49

Farhan Saqib

1

Setting the background in reactJS

3 Answers3