2

How would you make a radial gradient occupy the entire body?

At the moment i can make the gradient just fine, but the problem is that the gradient only occupies roughly 100px by 100px. The body background is set to 100%, but still no luck.

Any ideas? Below, is the CSS i'm using at the moment.

body {
  background-color: #2b616d;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(99%, #568b93), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -moz-radial-gradient(center center, circle, #568b93 99%, rgba(0, 0, 0, 0) 100%);
  background-image: radial-gradient(center center, circle, #568b93 99%, rgba(0, 0, 0, 0) 100%);
}

Edit1: It seems Firefox is working just fine with the above code, and rather it is Webkit who is having the actual problems. Any help would be much appreciated!

Edit2: According to this link: http://webkit.org/blog/175/introducing-css-gradients/ My use of webkit's "point" is screwed up.. specifically, the radius after each point. The problem is though, that this seems to be an integer only value, as percentages do not seem to work.. Eg, i am trying to make the radius 100%, but only pixel values seem to apply.. any ideas?

Lee Olayvar
  • 3,660
  • 6
  • 30
  • 36
  • 2
    This might just be a bug in webkit. When I play with the background-size property reducing it below 100% doesn't change the gradient size, but if you increase it above 100%, it zooms the gradient - NOT expected behavior – Michael Mullany Oct 11 '10 at 03:16
  • Yea for now i just let it go. In the end all of the browsers should be using the default radial-gradient() attrib, so they should all be behaving similar. :) – Lee Olayvar Oct 20 '10 at 05:11
  • **Duplicate:** See if http://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats solves your problem. It seems to me you are having the same issue. – Jo Liss Jan 18 '12 at 14:58

1 Answers1

0

For the Mozilla-ish syntax, try this:

[-moz-]radial-gradient(center center, circle cover, #568b93 99%, rgba(0, 0, 0, 0) 100%)
                                             ^^^^^

I don't know what the Webkit equivalent is. If 'cover' doesn't work, try 'farthest-corner'.

zwol
  • 135,547
  • 38
  • 252
  • 361
  • Actually, i wasn't testing it in Firefox yet. Seems FF and Webkit are having serious conflicts. The code above was generated from Sass/Compass. Upon further investigation, Firefox is working as i had wanted. Webkit is currently the one causing issues. Grr :/ – Lee Olayvar Oct 10 '10 at 19:34