background image only on homepage and button component using react js

user_14182486 0
Viewed 189

I have a website to build and I want my background image to appear only on the homepage, Calculator button, and the map button. I have put the following code in the app.css but it appears in all the pages I want to render. So, how can I make it appear only on these three pages? I have the following code:

body {
        background-image: url('./Assets/background.jpeg');
          background-repeat:'no-repeat';
          background-position:'center';
          background-size: 'cover';
          height: '100vh';
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
  }


body::-webkit-scrollbar {
                         width: 10px;  
                         background-color:#ee7600;       
  }
css html
1 Answers

Adding background in .body makes it accessible for every component in your application so; lets say your homepage div looks like this:

<div>...your_homepage_components</div>

you need to add className attribute to this div to have unique css properties for different components.

<div className='homepage'>...your_homepage_components</div>

and in your app.css

.homepage {
   ...your_desired_css
}
user_76884230
Related