Home/ Questions/Q 8909685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T03:29:41+00:00

I’m using Chrome version 24.0.1312.25 beta-m and I’m trying to get a radial gradient

  • 0

I’m using Chrome version 24.0.1312.25 beta-m and I’m trying to get a radial gradient for a small site, it doesn’t seem to display correctly in Chrome.

The CSS I’m using is:

html {
    background: -webkit-radial-gradient(circle, rgb(255, 255, 255), rgb(0, 0, 0));
}

With the HTML:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="dHb.css" />
  </head>

  <body>
  </body>
</html>

And it’s displaying as this: https://i.stack.imgur.com/JbSuo.jpg

First of all, it’s not radial. Secondly, there’s a band directly in the center if you look closely.

Does anyone know why this is happening and what I can do to make it work?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this

    <!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="dHb.css" />
  </head>

  <body>
  </body>
</html>​

    CSS

    html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;

  /* fallback */
  background-color: #2F2727;
  background-image: url(images/radial_bg.png);
  background-position: center center;
  background-repeat: no-repeat;

  /* Safari 4-5, Chrome 1-9 */
  /* Can't specify a percentage size? Laaaaaame. */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#FFFFFF), to(#000000));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #FFFFFF, #000000);

  /* Firefox 3.6+ */ 
  background: -moz-radial-gradient(circle, #FFFFFF, #000000);

  /* IE 10 */ 
  background: -ms-radial-gradient(circle, #FFFFFF, #000000);

  /* Opera cannot do radial gradients yet */
}​

    http://jsfiddle.net/ETKpb/5/

    • 0