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:
Related
Check out this pen in Chrome and then Firefox:
http://codepen.io/richbrat/pen/fLdFw
In Chrome the SVG is scaling appropriately but not in Firefox. Why is that, has it got something to do with preserveAspectRatio in SVG?
The SVG is here:
https://s3-us-west-2.amazonaws.com/s.cdpn.io/156826/bg.svg
Check out CSS
background-size: 100% 100%;
Take a look at Browser compatibility: http://caniuse.com/#search=background-size
For this effect that you look for, a linear background could be used as well :
background: #e8f5fa linear-gradient(to bottom right, transparent 51%, #DAEAF3 50%) ;
For the background-size, it can be written this way too:
background: #e8f5fa url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/156826/bg.svg') no-repeat 0 0 / 100% 100%;
I applied a gradient as background image to my body. Then I added 255px offset at the top using background-position:0 255px;.
It looks quite good except one little issue: of course the gradient does not end at the bottom of the page but 255px underneath.
Is there any easy way to let the gradient end at the bottom but start with offset from to?
http://jsfiddle.net/julian_weinert/ar6jC/
You can achieve what you want like this: Place your background at 0px 0px and define a gradient with more color-stops, having one solid color area at the top and then the actual gradient, like this:
background-position: 0px 0px;
background-image: linear-gradient(to bottom,
#FFFFFF 0px, /* Have one solid white area */
#FFFFFF 255px, /* at the top (255px high). */
#C4C7C9 255px, /* Then begin the gradient at 255px */
#FFFFFF 100% /* and end it at 100% (= body's height). */
);
(The sample code works on latest versions of Chrome and FireFox, but adapting it to support all major browsers and versions is straight-forward, applying the same principle.)
See, also, this short demo.
How can I create a programmatic horizontal gradient that starts at a prescribed location (in pixles on the x-axis)?
Here's the issue- I've got an image set as background-image - ideally, what I'd like to do is declare a CSS gradient that starts close to the edge of the image (~1800 pixels) and fades gracefully to full black.
So far, the best solution I have is to have two div elements- one with the photo background and the other with a 1px tall gradient image repeated along the y-axis with a background-position that starts at 1780px.
This works, but I really want to get away from the 1px image trick. Any ideas?
<div id="photobg">
<div id="gradientbg">
</div>
</div>
#photobg {
background-image:url('photourl.jpg');
}
#gradientbg {
background-image:url('1pxgradient.jpg');
background-repeat: repeat-y;
background-position: 1780px 0;
height: 100%;
}
What I'd like to do, in theory, is use color stops at 1780 px for a CSS gradient but as I understand it, CSS only supports % values as color stops.
Reference:
CSS 3 Gradient n pixels from bottom - Webkit/Safari
No, you can use pixels with linear gradient:
background-image: linear-gradient(transparent 1780px, black 100%);
You can also combine this gradient with multiple background images on one div.
You might want to check out this jsbin, I've made for you:
http://jsbin.com/sonewa/1/edit
This block of css will do what you want
background: -moz-linear-gradient(center top , #00AFF0, #53D4FE); //this is for mozilla
background-image: -webkit-linear-gradient(top, #00AFF0, #53D4FE); //this is for chrome and safari
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00AFF0', endColorstr='#53D4FE', GradientType=0); //this is for IE
while the gradient is from color #00AFF0 to #53D4FE (top to bottom)
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/
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.