Utilizing a linear gradient in the background is ineffective, whereas using a solid color produces the desired effect

Struggling to apply a linear gradient background to the login page on my website, I'm encountering difficulties in getting 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>

Although it works in the snippet provided, applying #login{background: red;} successfully changes the background to red. However, when switching to 

#login {background: linear-gradient(red, yellow) !important;}
, for some reason, the background turns white as shown in the screenshot below.

I am utilizing Bootstrap 4 in my codebase.

css

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

Screenshot:

https://i.sstatic.net/mEQxy.png

css

#login {
  background: red;
}

Screenshot:

https://i.sstatic.net/eiJnS.png

htmlcssdjango

Answer №1

To increase the height of your div element, simply add the following CSS code

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

.content{
position:absolute;
left:20%;
top:50%;
z-index:1;
}
<body >
<div class='wrapper'>

 </div>
 <div class='content'>
  username___________________<br><br>
  password___________________<br>
 </div>
</body>

Answer №2

It seems like there is some confusion regarding your request. Could you possibly provide a sketch or screenshot to clarify what you are trying 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery, it is possible to eliminate a div element without affecting its contents

<div class="a"> <div class="b"> <ul> <li>Element A</li> <li>Element B</li> </ul> </div> </div> How can I eliminate div class="b" solely? I require the presence of div a, u ...

javascriptjqueryhtml

Design interactive images in NativeScript

I need assistance setting up clickable images in NativeScript. My goal is to arrange 5 images horizontally, and when one image is clicked, the images to its left should change their values. Here's what I've attempted: <Label col="0" row="0" ...

javascripthtmltypescriptnativescript

What is the Count field used for in django?

If we consider a scenario where there is a model class Entity(models.Model) count = models.IntegerField()' Query: Is there a specific field type in Django that automatically increments the value of 'count' whenever an action is perfor ...

pythondjango

Issue with displaying sidebar using blockquote in Bootstrap 4.1.3

After implementing the blockquote class in Bootstrap 4.1.3, all the effects were successfully applied, except for the sidebar. Here's a comparison of how it appears in tutorials: https://i.sstatic.net/qNXrV.png And here is how it appears in my Chrom ...

htmlcsstwitter-bootstrapsidebarblockquote

Do you have a title for the pre code section?

When it comes to tables, there's a <caption>, and for figures, there's a <figcaption>. But what tag should be used for pre? (The goal is to provide a caption for a listing, but since the <listing> tag has been removed, <pre& ...

htmlsemantic-markup

I'm having trouble removing records from MySql

I am facing an issue with two tables in my database. Table a is referencing table b, or so I believe. Whenever I attempt to delete the entire package using the following query: $query="DELETE a, b FROM classified as a, $sql_table as b WHERE a.ad_id = &ap ...

phpsqlmysqlhtmldatabase

What is the best way to replace an object with another object in a get_or_create method?

I am dealing with two tables that have similar fields, and my goal is to copy objects from one table to another. The challenge arises when the object may not exist in the second table, so I need to utilize the get_or_create() method: # Here, we have a lis ...

pythonmysqldjango

Mastering the nth-child selector in css

How can I apply the :nth-child() selector to all elements in an HTML document except for the last one? Is this code snippet valid? = td:nth-child:not(last-child){ //Some css// } I am using the text-overflow:ellipsis property to hide overflow ...

htmlcsscss-selectors

What is the purpose of using colspan in CSS?

I'm attempting to rearrange a table layout from its current form: https://i.sstatic.net/fVgz6.png to look like this: https://i.sstatic.net/cYXGD.png using only CSS. The rationale behind this is the abundance of space available on desktop compared ...

htmlcsscss-tables

The header appears distorted on older versions of Internet Explorer, specifically IE 7 and IE

The website I am currently working on looks great in Chrome, Firefox, Opera, and Safari on both Mac and Windows. However, it is not displaying correctly in IE 7 & 8. The header should appear like this: But in Internet Explorer, it's showing up like t ...

htmlcssinternet-explorerlayoutheader

Tips for preserving an HTML dynamic table in a database

I have a challenge where I am generating a dynamic HTML table using javascript. What is the best way to store this dynamic HTML table in a database using CodeIgniter? This is the code snippet for my input form: <table id="tb3" name="tb3"> & ...

javascriptphphtmlcodeigniter

Is it not possible for calc to determine the width of the parent div?

body{width:400px;} .bd{ padding:0 50px 0 80px; height:100px; } .middle{ float:left; width:100%; height:80px;background:blue; } .left{ float:left; width:180px; height:80px;background:#0c9;margin-left:-320px;} <div class="bd"> <div class="mid ...

htmlcss

Unslider: Ensure images stay centered even on smaller screen resolutions

Utilizing Unslider in a recent project from . Managed to align the slider halfway, but facing an issue with off-center slides on resolutions of 1920px and lower. The image width is 3940px. Attempted to implement the code snippet from this answer like so: ...

javascriptjqueryhtmlcssunslider

Django with the chromium compact language detector

I tried using the chromium-compact-language-detector to identify the language in a text but it seems to have trouble detecting Japanese. text = '1/15 HR Div.Q&CS Dept. 全体MTG 開催 1月15日(水)、赤溜オーディトリアムにてHR Div.Q ...

pythondjangochromiumlanguage-detection

CSS media query that prioritizes styling for large screens over small screens

I am currently working on making my new website development project mobile responsive, but I am encountering some strange behavior that is quite frustrating. I am hoping someone can help me figure out what mistake I may be making here. Whenever I test the ...

cssresponsive-designmedia-queries

What is the best way to retrieve the top-rated comment for a different model using Django's ORM?

I'm facing a rather straightforward issue, but I can't seem to get prefetch related to work properly for me. Here are my relevant models: class Topic: name = models.CharField(max_length=100, unique=True) class Aritcle: topic = models ...

pythondjangopostgresqldjango-models

What is the best way to incorporate next and previous buttons into my slideshow using jQuery?

Looking to enhance my slideshow by incorporating the ability to pause, go to the next or previous image, along with the automatic transitioning feature currently in place. I'm a bit unsure on how to implement these event handlers efficiently within my ...

javascriptjqueryhtmlslideshow

Prevent users from inserting images from their desktop into the HTML by disabling

While working on a HTML5 drag and drop image uploading feature, everything was going smoothly. I had a small div in the HTML with a JavaScript event handler set up like this: $('#uploader').on('dragover', function(e){ ... }).on(&apos ...

javascripthtmldrag-and-drop

Display inconsistency noticed in Wordpress Carousel for images

This particular issue revolves around how images are displayed in the Wordpress Carousel. To see the problem in action, visit the product page linked below: When you navigate to this page, do not click on any of the pictures. Instead, select an option fro ...

csswordpress

What is the best way to display the full dropup-menu content while the scroll bar is active?

I've been working on a project where I need to ensure that the dropup-menu content is fully visible when the scroll bar is in use. Currently, the dropup-menu content isn't displaying completely when scrolling up or down. To enable the scrollbar ...

javascriptcssscrollbootstrap-4scrollbar