Search code examples
cssradial-gradients

CSS3 radial gradient appears as line

I've been trying to create a radial background, except for some reason all I can get is a line. I have no idea what I'm doing wrong, any ideas?

Jsfiddle: http://jsfiddle.net/3QSFj/1/

CSS: 

background: -webkit-gradient(radial, circle, 0, circle, 70, color-stop(0%, #718aa7), color-stop(70%, #203044));
background: -webkit-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -moz-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -o-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: radial-gradient(circle, #718aa7 0%, #203044 70%);
Solution

  • Set your body height to 100%, your body element is empty, and thus it doesn't have any height, the background is simply repeated there.. Bad Demo

    html, body {
   height: 100%;
}

    Demo

    Also, you background will be repeated, so you will need background-attachment: fixed; as well as background-repeat: no-repeat

    Demo 2