I asked a question CSS Gradients with little content some time back
I came up with a possible fix http://jsfiddle.net/aruUS/2/
html, body { min-height: 100% }
body {
background: -moz-linear-gradient(top, blue, red 200px);
background: -webkit-gradient(linear, 0 0, 0 200px, from(blue), to(red));
}
only the Firefox part works, it appears webkit only supports percentages for color stops? Anyway to make this work?
Simply remove the px from 200px. Pixel values are unitless in Webkit's gradient syntax. I.e.
background: -webkit-gradient(linear, 0 0, 0 200, from(blue), to(red));
See the Surfin' Safari blog's Introducing CSS Gradients:
A point is a pair of space-separated values. The syntax supports numbers, percentages or the keywords top, bottom, left and right for point values.
Numbers don't have a unit, as opposed to lengths, which do, according to the CSS specification.
try this:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.3, rgb(255,0,0)),
color-stop(0.47, rgb(255,0,0)),
color-stop(1, rgb(0,0,254))
);
More information for -webkit-gradient visit: http://webkit.org/blog/175/introducing-css-gradients/
Live example: http://jsfiddle.net/aruUS/3/
Tool to help you more: http://gradients.glrzad.com/
Related
BUG! Left here in hope that it will attract attention and perhaps a fix.
The problem is that chrome, makes(i have checked!) the first half of the gradient smaller than the second one. My code is:
background: linear-gradient(to left, #ffffff 50%, #f5f5f5 50%) fixed;
Also tried:
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3236), color-stop(50%,#ff3236), color-stop(50%,#000000), color-stop(100%,#000000));
background: linear-gradient(to left, #f5f5f5 0%,#f5f5f5 50%,#ffffff 50%,#ffffff 100%);
Edit/Update: It is indeed a bug - updates are for clarity (top 2 blocks are divs, each 50% width, of screen - bottom is split with gradient):
1) Visual representation of the bug:
2) Thanx to #elstgav for a putting up the a Codepen Test
As of now (2016-11-02), This issue ssems to be fixed, I just tested these pens :
http://codepen.io/elstgav/pen/guotz
http://codepen.io/gliesche/pen/GoWMVO
in Chrome Version 54.0.2840.71 m,
and they all work.
However, Chrome still seems to have some issues with scaling gradient backgrounds when they are repeated:
SO link: Chrome not updateing background-size gradient properly on resize
Chrome BT: https://bugs.chromium.org/p/chromium/issues/detail?id=604875
I found an opposite result in Firefox and Chrome when rendering a gradient background with offset set.
Here my css code:
html
{
background:linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 8%);
background-position: center top 30px;
}
body
{
background:linear-gradient(to bottom, rgba(255,255,255,0) 92%,rgba(245,245,245,1) 100%);
background-position: center bottom 100px;
}
The idea is to apply a sort of "Sliding doors" of background applying 2 opposite gradient onto html and body elements.
The problem rises when I set the bottom offset in Body tag: Firefox translates up with positive values, while Chrome translate up with negative values (or bottom with positive). So two major browsers have opposite behaviour.
How to solve this?
I found solution for Chrome!
It is sufficient to add
background-repeat:no-repeat;
to BODY tag css declaration, as showed in this updated JsFiddle:
I'm struggling to get the size of CSS3 gradients to work properly. I've set a background-size:800px; yet, as seen in the jsfiddle below, it most certainly isn't 800px. Have I misunderstood the property? It seems to work differently in different circumstances; when used without other headers the background resizes with the browser, when included in the H5BP it doesn't resize, but is far too short in height.
I am very very confused! How on earth do I create a repeating background gradient of a specific size?
body {
background: #0d1a2d;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1b355a), color-stop(50%, #000000), color-stop(100%, #1b355a));
background-image: -webkit-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: -moz-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: -o-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: linear-gradient(#1b355a, #000000 50%, #1b355a);
background-size: 800px;
}
jsfiddle: background-size example
You need to specify the size in both the x and y direction, like so:
background-size: 800px 800px;
View on JSFiddle
With that said, what you've done is compliant with the CSS3 specs. According to the MDN, however -- and what we can gather from your experiment -- browser compliance with this spec is inconsistent and unreliable. So, for now, it's best to explicitly define both directions.
Once browsers' behavior complies with the specs, setting a single value will set the other to be auto.
I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.
I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.
If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.
If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.
In Adobe Fireworks, I would export this as a PNG-24.
Good luck.
http://codepen.io/anon/pen/JdEjWm
#gradient {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
I made a "scatter.png" to put with my gradient. Like this:
Open gimp
100x100 image
Add alpha channel
Filters -> Noise -> Hurl... Accept defaults
Set opactity to 5%
Save and then add to gradient.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
It's a subtle effect on a subtle effect.
For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.
.blur{
overflow:hidden;
filter: blur(8px);
}
I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:
This gradient produces banding:
background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);
This gradient does not, and looks much the same:
background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.
Add a min-height.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
you can also set background-repeat to no-repeat but shouldn't be necessary.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}
this property seems to fix things
background-attachment: fixed;
got from this thread
When I use gradients, with little content, the gradient repeats, how can I prevent that?
http://jsfiddle.net/mcqpP/1/
I can try using html { height: 100%; }, but when my content requires scrolling ... the gradient repeats
http://jsfiddle.net/mcqpP/3/
How can I fix this
You need to set percentages on the CSS gradients, not absolute pixels. And as long as you only care about modern browsers (i.e. you don't care about IE6) then I suggest you stay away from images, the CSS works fine.
I'm pulling my answer from the answer to this question that I wish I could upvote 100 times:
How to get a vertical gradient background to work in all browsers? That accepted answer has everything you need with full cross browser compatibility.
Here's where I took your example and made it work: http://jsfiddle.net/HJvpf/1/
body {
background: -moz-linear-gradient(top, red 0%, blue 100%);
background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue));
}
Oh and in your 2nd jsFiddle link, the reason it was repeating the gradient is because you set height 100% on html but the gradient was on body. You move that height: 100%; to the body and it works fairly well, but as you can see in my solution you don't need to specify height at all.
Edit: So you don't want it to repeat, but you also don't want it to take up the entire height. Just set repeat-x. http://www.w3schools.com/css/pr_background-repeat.asp
body {
background: -moz-linear-gradient(top, red, blue) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
To have the bottom gradient color fill the rest of the space:
body {
background: blue -moz-linear-gradient(top, red, blue) repeat-x;
background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
Why not render your gradient out as an 1px-wide image and use something like the following:
body {
background-color: #fff;
background-image: url("images/background.jpg");
background-position: center top;
background-repeat: repeat-x;
}
Setting the background-repeat value will help you control how the background... repeats. In this case it would be rendered as a solid band across the top.
http://www.w3schools.com/css/pr_background-repeat.asp
Also, using an image should work across all browsers, whereas the moz-gradients could be problematic. The image method above should render very predictable results across all browsers.
I had the same problem but realised that it made sense and so just accepted the scrolling / repeating gradient. You could set a fixed height, not %, but to ensure that the gradient didn't repeat you would need to set the height as bigger than anybody's screen who wants to view it. And you don't know what resolutions people have. My advice is to just leave it.