css adding linear-gradient to background does not work, but adding single color does

Question

I am trying to add a linear gradient background to the login page of my website, however I cannot seem to get it to work.

#login {
  background: linear-gradient(red, yellow) !important;
}
#login .container-bg {
  background-color: #fff;
  min-width: 25rem;
  min-height: 30rem;
  width: 15vw;
  height: 50vh;
  border-radius: 16px;
  -moz-box-shadow:    0 0 8px 4px #e8e8e8;
  -webkit-box-shadow: 0 0 8px 4px #e8e8e8;
  box-shadow:         0 0 8px 4px #e8e8e8;
}

<body id="login" class="vh-center">
  <div class="container-bg">

  </div>
</body>

This is working in the snippet but not in my code. Adding #login{background: red;} changes that background to the colour red. However if I were to change this to #login {background: linear-gradient(red, yellow) !important;} then the background of the page is white as you can see from the screenshot below.

I have using Bootstrap 4 if that makes a difference.

css

#login {
  background: linear-gradient(red, yellow);
}

Screenshot:

css

#login {
  background: red;
}

Screenshot:

It seems to be working just fine. Are you sure you are not overwriting style in another part of your code? — treecon, Dec 24 '20 at 22:07
"*If I...it works as expected*" - what are your expectations? — David Thomas, Dec 24 '20 at 22:08
Your snippet is working fine on Chrome/Edge, Firefox on Windows10 and Safari on iPadIOS 14.2. — A Haworth, Dec 24 '20 at 22:11
I have edited the question. If I add a single colour is changes the background to that colour. but I want a `linear-gradient` which doesnt work. — Ross, Dec 24 '20 at 22:12
I think you'll need to show us a bit more, can you make a snippet which doesn't 'work' as the snippet you have is fine - but it's nothing like the image you have shown where it looks as though another element(s) is overwriting much of the underlying body - what other CSS is there? — A Haworth, Dec 24 '20 at 22:14

DCR · Answer 1 · 2020-12-24T22:39:16.490

1

just add height to your div

.container {
  background: linear-gradient(red, yellow);
  height:100vh;  
  position:relative;
  z-index:0;
  
}

.inner{
position:absolute;
left:20%;
top:50%;
z-index:1;
}

<body >
<div class='container'>
 
 </div>
 <div class='inner'>
  userid___________________<br><br>
  password___________________<br>
 </div>
</body>

edited Dec 24 '20 at 22:39

answered Dec 24 '20 at 22:09

DCR

14,737
12
52
115

This didnt work for me I'm afraid. – Ross Dec 24 '20 at 22:13
does it work in the snippet the way you want? – DCR Dec 24 '20 at 22:14

score 0 · Answer 2 · answered Dec 24 '20 at 22:47

not clear what you are looking for. Can you post a sketch or screenshot of what you would like to achieve?

#login {
  background: linear-gradient(red, yellow) no-repeat!important;
  height:100vh;
}
 .container-bg {
  background-color: #fff;
 
  width: 15vw;
  height: 50vh;
  border-radius: 16px;
  -moz-box-shadow:    0 0 8px 4px #e8e8e8;
  -webkit-box-shadow: 0 0 8px 4px #e8e8e8;
  box-shadow:         0 0 8px 4px #e8e8e8;
}

<body id="login" class="vh-center">
  <div class="container-bg">

  </div>
</body>

css adding linear-gradient to background does not work, but adding single color does

2 Answers2