What is the best way to eliminate the line at the bottom of a gradient?

My website background is created using a combination of radial and linear gradients:

background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);

However, when the user scrolls vertically on pages larger than 1920x1080 resolution, a noticeable line appears between the original gradient and its continuation:

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

I am looking for a way to remove this visible line so that the transition between gradients remains seamless as users scroll down the page.

Would appreciate any CSS solution to achieve this effect.

htmlcss

Answer №1

According to the advice given by Temani Afif 15 minutes ago, it appears to be functioning properly html {min-height: 100%} 

html {
  min-height: 100%;
}

body {
  background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);
}
<body>
</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

Why is my AngularJS application triggering two events with a single click?

<button id="voterListSearchButton" class="serachButton" ng-click="onSearchButton1Click()">find</button> This button allows users to search for specific information: $scope.onSearchButton1Click = function() { var partId = $("#partIdSearch" ...

javascripthtmlangularjscss

After converting my HTML elements to JSX in Next.js, I am experiencing issues with my CSS files not being applied

Hey there, I'm currently working on a website using Next.js. I've converted the HTML elements of a page to JSX elements but for some reason, the CSS of the template isn't showing up. I've double-checked all the paths and even updated th ...

javascripthtmlcssreactjsnext.js

Bootstrap 4 - Interactive horizontal timeline for optimal viewing on all devices

I'm working on creating a responsive horizontal timeline using Bootstrap 4 for my timeline and project. The code I've developed so far is working well in terms of being responsive. timeline.html <div className="container timeline-container"& ...

cssbootstrap-4timeline

Issue with JQuery on("submit") event not triggered upon first click

I'm currently using JQuery to check the size of an input field after submitting a form: <!DOCTYPE html> <html lang="en> <head> <title>Page 1</title> <meta charset="utf-8"/> <script src="https://ajax.google ...

javascriptphpjqueryhtml

Creating a CSS grid layout with a scrollbar positioned on the left side and content filling from left to right

How can I move the scrollbar to the left while keeping ng-repeat population from left to right? I'm using an ng-repeat to fill a grid that is 3 by X (Width by height). By default, the scroll bar appears on the right side. I want to position it on the ...

htmlcssangularjscss-gridgrid-layout

What could be causing the background image on my Jumbotron to fail to load?

Having some trouble with setting my image as the background of the Jumbotron. I've tried a few different approaches, but none seem to be working. It's not an issue with static loading because using img src directly into the Jumbotron section does ...

htmlcssdjango

Numerous animated elements within A-frame

Is there a way to incorporate animation into an A-Frame glTF model, causing it to smoothly move 5 spaces to the left and then 5 spaces forward? Below is my current code: <a-gltf-model color="#FFFFFF" width="1" height="1" de ...

javascripthtmlcssanimationaframe

Is there a way to retrieve the aria-label attribute value from this specific WebElement?

When utilizing Java Selenium, I have access to a WebElement object that corresponds to the following HTML node: <td role="gridcell" class="mat-calendar-body-cell ng-star-inserted" style="width: 25%; padding-top: 7.14286%; paddin ...

javahtmlselenium-webdriverdomselenium-chromedriver

Issue with AngularJS URLs not functioning properly when using HTML5 mode

Utilizing the AngularJS SPA template in Visual Studio. In my app.js file, I have the following code: $stateProvider .state('touranalysis', { url: '/touranalysis', templateUrl: '/views/touranalysis/index', ...

htmlangularjs

Can you identify the distinctions between two almost identical HTML emails?

I am currently facing a puzzling situation. There are two emails that I have - one with a sidebar and one without. When the email with the sidebar is received in Gmail, it displays correctly. However, the email without a sidebar loses some formatting, incl ...

htmlemailgmail

"Troubleshooting a dropdown navigation bar problem in CSS

I am currently working on creating a CSS navbar dropdown, but I am encountering some issues. I am not very experienced with CSS, so any assistance would be greatly appreciated. The text within the "Products" box is not changing color like it should, and yo ...

htmlcssdrop-down-menu

Combine less files in webpack to generate a single minified CSS output file

Can webpack be used to combine multiple less files into one minified CSS file? I'm having trouble setting different output paths for my files. How can I make my CSS file output to './assets/stylesheets/bundle/' instead of './assets/ja ...

javascriptcsswebpack

Position the larger element in the center of the smaller container element

Is there a way to center an image without it covering up the paragraph below? Using position: absolute; or float: left; can lead to layout issues. <p>This is the first paragraph</p> <p><img src="http://placekitten.com/600/280"/>&l ...

htmlcss

Enhance your website design with Bootstrap's unique styling for jumbotron elements

I am currently working on developing a mobile website for calendar events and I need some help. Here is the basic version of the site that I have created so far: The issue I am facing is that the purple backgrounded areas only cover the text, rather than ...

csstwitter-bootstraptwitter-bootstrap-3

Animating file transfer can be achieved using either JavaScript or CSS

My goal is to create a visual representation of file transfer, such as moving a file from one folder to another. I have successfully achieved this using JavaScript with the following code: <script type="text/javascript> var img; var animateR; var an ...

javascriptjquerycssjquery-animatecss-animations

Ways to target only the adjacent div

My goal is to target only the next div with the class name indented. Each indented div should have the same id as the <li> element right before it. Currently, I want each div with the class name indented to have the id of the previous <li>. He ...

javascripthtmljquery

When using jQuery, adding a class does not always trigger CSS animation

Currently facing a peculiar issue. I am utilizing jQuery to load articles from JSON and would like to dynamically add a class of 'animate' to each loaded element. $.each(jsonArticles, function (i, article) { var $articleHTML = $( ' ...

javascriptjquerycsscss-animations

The HTML document is experiencing overflow within the body element

I am in the process of designing a website that consists of two main sections. The first section includes a video, a navigation bar, and some introductory text. The second section features an image and a lorem ipsum paragraph. However, these two parts are ...

htmlcssvideo

Position a DIV element without specifying the width dimension

Possible Duplicate: How can I center something if I don't know ahead of time what the width is? I am seeking guidance on aligning a div element without prior knowledge of its width. My approach differs from previous inquiries as I am open to usin ...

htmlcsscenter

Developing a fixed footer in Angular 7 using the Bootstrap4 framework

I am currently learning angular7 and I have been struggling to create a sticky footer. Despite trying multiple solutions, none seem to work for me. Here are some of the solutions I have attempted: https://getbootstrap.com/docs/4.3/examples/sticky-footer ...

cssbootstrap-4angular7