This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 4 months ago.
I generate my pages background using a radial/linear gradient, specifically:
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%);
When viewing pages larger than 1920x1080 and scrolling on the y axis I get a line between the original gradient and the continuation that looks like:
I want to get rid of this line somehow so that when a user scrolls down the page, everything appears seamless.
How can I do this in CSS?
That seems to work as suggested by Temani Afif 15 mins ago
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>
Related
I am having issues getting this to work, for context I am making a simple stat tracking website and .body-bg-image is for my home page.
I want a gradient for my background, not a solid color, so I tried to do that as you can see below. It does show the gradient but does not show the image anymore.
.body-bg-image {
background: linear-gradient(
to top,
rgba(196, 145, 2, 1) 0%,
rgba(149, 48, 54, 1) 87%
)
fixed,
/* this image doesn't show,
it works if I have the background as a color but not as a gradient */
url("./assets/apexrevanant.png") top center no-repeat;
}
It used to work when it was like this, just a solid primary color and the image:
.body-bg-image {
background: var(--primary-color) url("./assets/apexrevanant.png") top center no-repeat;
}
With the background shorthand, order matters.
Linear gradient adds an overlay to the image if the image is declared after the gradient. As you have solid colors, it won't be visible.
If you set the colors to a lower opacity you should be able to see it:
body {
height: 100vh;
background: linear-gradient(to top, rgba(196, 145, 2, 0.5) 0%, rgba(149, 48, 54, 0.5) 87%) fixed, url('https://mobiledevmemo.com/wp-content/uploads/2014/12/173572251_Chocolate-chip-cookie.jpg') top center no-repeat;
background-size: auto 100%;
}
If you want the image in front of the gradient reverse the order they are declared in:
body {
height: 100vh;
background: url('https://mobiledevmemo.com/wp-content/uploads/2014/12/173572251_Chocolate-chip-cookie.jpg') top center no-repeat, linear-gradient(to top, rgba(196, 145, 2, 0.5) 0%, rgba(149, 48, 54, 0.5) 87%) fixed;
background-size: auto 100%;
}
I'd like to insert a picture to separate the 'limits' of the progress bar.
Hence the right side would be red, than I'd have my little picture, followed by a green side
Is it possible?
Client side it is all just html, css and javascript. A css linear gradient already works great (boundaries at 10 and 90 percent)
.ui-progressbar {
background: -moz-linear-gradient(left, rgba(0,255,0,1) 0%, rgba(0,255,0,0) 10%, rgba(255,0,0,0) 90%, rgba(255,0,0,1) 100%);
background: -webkit-linear-gradient(left, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1 );
}
And if you want to combine it with an image, see
How do I combine a background-image and CSS3 gradient on the same element?
I've got a gradient div, here it is:
<div class="gradient"></div>
And here is css:
.gradient {
width: 20px;
height: 20px;
background: linear-gradient(to right, rgba(0,0,0,0) 0%, #fff 100%)
}
Very simple.
In Chrome it's works fine, but in Firefox (34.0, Ubuntu 14.04) it's work not correctly:
I tried use rgba(0,0,0,0) instead transparent, tried -moz-linear-gradient prefix — no results.
dabblet link
Thanks!
If you want to avoid the grey in the middle you can use a gradient from transparent white (255, 255, 255, 0) to opaque white (255, 255, 255, 1),#fff.
.gradient {
width: 20px;
height: 20px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%)
}
http://dabblet.com/gist/64dd43f37e8978d08749
In your code the gradient goes from transparent black to opaque white and because of that the grey part in the middle shows up in FF.
I guess chrome and other browser calculate the color steps in the gradient differently.
body background is defined in inline css as
body {
background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
}
In real web sites latest Internet Explorer shows horizontal lines in background.
In IE developer tools I turned all other styles in body off, tried 2-color gradient, linear gradient and other colors, but problem persists.
How to force IE to show background without horizontal lines ?
Chrome shows proper background. Also Internet explorer shows proper background if only this style is used. Page
<html>
<head>
<style type="text/css">
body {
background: radial-gradient( #EAC39F, #CB690C);
}
</style>
</head><html><body></body></html>
is shown properly. If there are more elements in page, horizontal lines appear.
How to remove those lines in Internet Explorer ?
jquery and jquery-UI are used in page.
Since IE does not apply height to body, either you apply a fixed height to body or you apply a 100% heightto html tag in your CSS,
and if you don't need the background to repeat, apply, background-repeat:no-repeat.
Also If you are looking for a cross-browser support then you should use the vendors browsers.
Here is a snippet working in IE10+:
html {
height: 100%
}
body {
background: rgba(234, 195, 159, 1);
/* Old Browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(234, 195, 159, 1)), color-stop(100%, rgba(203, 104, 12, 1)));
/* Chrome, Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* Opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* IE 10+ */
background: radial-gradient(ellipse at center, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eac39f', endColorstr='#cb680c', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
background-repeat: no-repeat
}
The issue appears to stem from the fact that IE is not applying a height to the body element. As such the background gets repeated and you see the lines.
By applying
body {
background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
}
A similar effect can be seen at http://jsfiddle.net/xpz2tgp9/ in Chrome, IE, etc.
To resolve your issue, apply a specific height to the body element or add a clearing div that will force the body to have height value.
html,body
{
height: 100%;
margin: 0;
padding: 0;
}
See - http://jsfiddle.net/xpz2tgp9/1/
I'm using a gradient as a background. I was hoping that the gradient would start out darker and gradually lighten as it gets to the other end of the container that it is applied to. Instead, what I notice is that the darker part covers around 90% and only after this 90% does it start to get lighter. It would be nice if around 50% it was halfway between the start and end color. Is there any way of achieving this? Here is my css:
background: -moz-linear-gradient(center bottom , #f4f7fa 0pt, #FFFFFF 100%) repeat scroll 0 0 transparent;
background: linear-gradient(bottom, #f4f7fa 0, white 100%);
background: -webkit-linear-gradient(bottom, #d6d6d6 0, white 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f7fa', endColorstr='#FFFFFF', GradientType=0);
Try using this code
background: linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -o-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -moz-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -webkit-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -ms-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
Gradient property explanation:
linear-gradient(Gradient Starting Position,Color & Offset,Color & Offset);
So in your code the color #D6D6D6 started form 0% and moves upwards,
then color #FFFFFF stated form 100% as offset is set as 100%(and it ends there too).
So to get the consistent flow from one color to other you should set the offset of second color to 50%.
Check this link to better understand CSS Gradient property.
Regards
Shiva