CODEWITHSUNDEEP
cssreactjs
fun joker
fun joker

Reputation: 1727

How to display background color in CSS not working?

I have created a login form and I want background color to be gradient. So I have added div tag and for that I have added background gradient and for login form I have added white background but the gradient is not shown for entire background why so (see screenshot) ?

Code:

loginForm.js

return(
          <div className={styles.container}>
          <Form className={styles.formStyle} onSubmit={this.handleSubmit}>
            <Header className={styles.title} as='h1'>Account Portal Login</Header>
            <Header className={styles.info} as='h5'>Please login with your URN number. If you have not been assigned a
            password, you can create one below and login afterwards</Header>
            <Header className={styles.info} as='h4'>Please login below</Header>
            <Form.Field>
              <Form.Input label="URN number" value={urnNumber} placeholder="Enter URN number" onChange={this.handleChange}/>
            </Form.Field>
            <Form.Field>
              <Form.Input type="password" label="Password" value={password} placeholder="Enter password" onChange={this.handleChange}/>
            </Form.Field>
            <Button className={styles.loginButton}>Login</Button>
          </Form>
          </div>
        )

loginForm.module.css:

.container {
    background: linear-gradient(to top right, #b08fe6 0%, #a8cef3 100%);
}

.formStyle  {
    margin-left: 500px !important; 
    margin-top: 120px !important;
    width: 550px !important;
    height: 420px !important;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 20px;
    box-shadow: 0 0 5px 0;
    background: white;
}

Note: I am using react semantic UI library. In below screenshot the background gradient should come for entire screen and not just behind login form. Screenshot:

Scree Shot

Upvotes: 0

Views: 175

Answers (2)

Liam
Liam

Reputation: 6743

The container div should cover the whole screen

.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
   background: linear-gradient(to top right, #b08fe6 0%, #a8cef3 100%);
  }

Upvotes: 2

Newbie
Newbie

Reputation: 287

Try to add height to .container:

.container {
    background: linear-gradient(to top right, #b08fe6 0%, #a8cef3 100%);
height:100vh;
}

Upvotes: 0

Related Questions