My webpage has a beautiful gradient background, but unfortunately, when the page is zoomed in, the gradient stops working and only the background color is displayed.
Here is a snippet of the code:
<html>
<head>
<style type="text/css">
body {
background: linear-gradient(to bottom, #0c8530 0%, #0c6027 200px, #0c6027 100%) no-repeat scroll 0% 0% #0c6027;
}
div {
height: 200px;
}
</style>
</head>
<body>
<div>
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
</div>
</body>
</html>
Link to the code example on Fiddle: http://jsfiddle.net/3vLBb/
When scrolled, the gradient background looks like this:
I'm wondering if there is a way to make the gradient work properly even when the page is scrolled. Any suggestions would be greatly appreciated!