0

I'm trying to make my background gradient cover the whole page (at least in Firefox for the moment):

body{
background: -moz-radial-gradient(60% 40%, closest-corner, purple, #2F2727);
background-size: cover;
-moz-background-size: cover;
}

I tried this but it doesn't work. My gradient repeats.

Juicy
  • 11,840
  • 35
  • 123
  • 212
  • New Firefox doesn't require the moz prefix anymore – Itay Sep 12 '13 at 18:09
  • possible duplicate of [CSS3 gradient background set on body doesn't stretch but instead repeats?](http://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats) – Itay Sep 12 '13 at 18:11

2 Answers2

0

You need to add background-repeat: no-repeat;

Matt Sisto
  • 116
  • 5
0

If you're using jQuery, logically, this should work:

$("body").css( 'background', '-moz-radial-gradient(' + window.innerWidth + 'px ' + window.innerHeight + 'px, closest-corner, purple, #2F2727)' );

Although, it produces a background completely #2F2727 color, so it might not be your best bet, but that finds the height and width of the window and sets the gradient accordingly.

JVE999
  • 3,327
  • 10
  • 54
  • 89
  • Like you said it does work but it doesn't produce the gradient. Is there a way around this? – Juicy Sep 12 '13 at 21:26
  • I don't know, actually. It seems like it should work. There's probably something about gradients. – JVE999 Sep 12 '13 at 21:56