How to apply to background-image to only one react page not whole application?

user_11136807 0
Viewed 1202

Sample of Registration page:

.register{
background-image: linear-gradient(to right,#ff5722 0%,#ff9800 100%);
margin-top: 150px !important;
}

<div className="register">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-10 offset=md-1">
                                <div className="row">
                                    <div className="col-md-5 register-left">
                                        <h3>Join Us</h3>
                                        <p>Subscribe</p>
                                        <button className="btn btn-primary" type="button">About Us</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Sample of Default Layout (Core_ui Code Structure)

<div className="app">
            Header
            <div className="app-body">
                <main className="main">
                    <Suspense fallback={this.loading()}>
                        <Switch>
                            {routes.map((route, idx) => {
                                return route.component ? (
                                    <Route
                                        key={idx}
                                        path={route.path}
                                        exact={route.exact}
                                        name={route.name}
                                        render={props => (
                                            <route.component {...props} />
                                        )} />
                                ) : (null);
                            })}
                            {/* <Redirect from="/" to="/dashboard" /> */}
                        </Switch>
                    </Suspense>
                </main>
            </div>
            <Suspense fallback={this.loading()}>
                Footer
            </Suspense>
        </div>

I followed coreui code structure. and my app.css is empty. I created register.css and applied background but CSS applied to only container part instead of full page.

reactjs css html
2 Answers

See example how add routing and custom style for any page:

App:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import Login from "./components/Login";
import Register from "./components/Register";

class App extends Component {
  render() {
    return (
      <Router>
        <Route
          render={({ location }) => (
            <div>
              <Switch key={location.key} location={location}>
                <Route exact path="/" component={Home} />
                <Route path="/login" component={Login} />
                <Route path="/register" component={Register} />
              </Switch>
            </div>
          )}
        />
      </Router>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Home:

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Home extends Component {
  render() {
    return (
      <div>
        home
        <br />
        <Link to="/register">register</Link>
        <br />
        <Link to="/login">login</Link>
      </div>
    );
  }
}
export default Home;

Login:

import React, { Component } from "react";

class Login extends Component {
  render() {
    return (
      <div
        // here add you custom style for page
        style={{
          backgroundImage: "linear-gradient(to right,#ff8733 0%,#fa1100 100%)",
          height: 100,
          marginTop: 10,
          textAlign: "center"
        }}
      >
        Login
      </div>
    );
  }
}
export default Login;

Register:

import React, { Component } from "react";

class Register extends Component {
  render() {
    return (
      <div
        // here add you custom style for page
        style={{
          backgroundImage: "linear-gradient(to right,#ff5722 0%,#ff9800 100%)",
          height: 100,
          marginTop: 10,
          textAlign: "center"
        }}
      >
        Register
      </div>
    );
  }
}
export default Register;

Online example:

Edit styling example

UPDATE

to have full window div with background gradient: npm install style.css

after create style.css with body { margin: 0, padding: 0 } import this file in index.js : import "style.css";

After update styles for Login and Register component:

//...
style={{
  //...
  height: "100vh",
  margin: 0,
  padding: 0,
  // ....
}}
//...
user_86605270

Simpliest way is probably using CSS class.

  1. add this class in your styles.css
.full-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  // or "height: auto" if page is large and you need to scrool down to see all content
}

.bg-home {
  background-image: url("./assets/images/black-linen.png");
}
  1. in very first <div> element (where its return from function) add your classes
import `{ ButtonLogin, ButtonRegister }` from "../../components/Button";


function Home() {
  return (
    <div className='full-screen bg-home'>
      <div className='container'>
        <div className='buttons-div'>
          <ButtonLogin />
          <ButtonRegister />
        </div>
      </div>
    </div>
  )
}

export default Home
user_174029470
Related