How can I apply page specific Full screen background image using React?

Question

I have a component called admin-login.jsx and below is the code for the same:

// AdminLogin Component
class AdminLogin extends Component {

  componentDidMount() {
    let elem = document.querySelector('body');
    addClass(elem, 'admin-login-page');
  }

  componentWillUnmount() {
    let elem = document.querySelector('body');
    removeClass(elem, 'admin-login-page');
  }

  render() {

    return(
      <div className="admin-login">
        <LoginModule
          submit={handleSubmit(this.onLogin.bind(this))}
          email={email} password={password}
          loginFailed={this.state.loginFailed}
          disableSubmit={this.state.isLoading}
        />
      </div>
    );
  }
}

admin.login.scss

@import "styles/site-mixins";

.admin-login-page {
  background: url(../images/admin.login.bg.jpg) no-repeat top center fixed;
  @include prefix(background-size, cover, webkit moz ms);
}

routes.js

import App from 'components/app';
import Admin from './admin/admin';

const rootRoute = {
  'path': '/',
  'component': App,
  'childRoutes': [
    Admin
  ]
};

export default rootRoute;

routes/admin/admin.js

export default {
  'path': 'admin-login',
  'indexRoute': {
    getComponent(location, cb) {
      require.ensure([], (require) => {
        cb(null, require('components/admin/login/admin-login').default);
      }, 'admin_login');
    }
  },
  getComponent(location, cb) {
    require.ensure([], (require) => {
      cb(null, require('components/admin/admin').default);
    }, 'admin');
  }
};

I have stripped the code that our inessential for this question. What I am trying to do is apply the class admin-login-page to the body when this component mounts and then remove the class when the component unmounts.

But, I am seeing a very weird behavior. Even when the class gets removed on unmount and the route changes, the background image stays on the page.

I'll add the image for more clarity.

When I route to localhost:8080/admin-login:

When I route to the root url i.e localhost:8080 by clicking the logo on localhost:8080/admin-login using react-routers tag:

Note that, everything happens without refresh. Also, I can do this by getting the value of the height of the screen and then applying it as a property to one of the class present in the component so that when component unmounts the background disappears. But, I'd like a solution where I can apply a full screen background image using the body tag.

Thanks in anticipation.

Answer 1

I followed the below given post:

CSS-Only Technique #1

I used

<img src={ImgPathVar} alt="bg" class="bg"> for pages with bg images

and

<div className="bg-color"></div>

After that, I applied the below given css:

// Full page responsive background image
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

// Full page background color
div.admin-bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: $admin-bg;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }

  div.admin-bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Snippet of my actual code:

class AdminDashboard extends Component {
  render() {
    return (
      <div className="admin-dashboard">
        <div className="admin-bg"></div>
        <AdminHeader />
        <Link to="/staff-login">Staff Login</Link>
        {this.props.children}
      </div>
    );
  }
}



class AdminLogin extends Component {
  render() {
    return (
      <div className="admin-dashboard">
        <img src={ImgVar} className="bg" />
        <AdminHeader />
        <Link to="/staff-login">Staff Login</Link>
        {this.props.children}
      </div>
    );
  }
}