Creating a Radial Gradient Background using CSS3 and HTML5

HTML & CSS
1

Curious if anyone has tried this yet. I have been playing around with it without much success. Ive tried this:

html {
overflow-y: scroll;
background:-moz-radial-gradient(center, #2e658e, #fff) no-repeat #fff;
background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#2e658e), to(#fff)) no-repeat #fff;*/

}

AND this but separately. (I took it out of the html CSS listed above)

body {
font-family: “Trebuchet MS”, Verdana, myriad pro, Arial, Helvetica, sans-serif;
font-size: 14px;
position: relative;
background:-moz-radial-gradient(center, #2e658e, #fff) no-repeat #fff;
background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#2e658e), to(#fff)) no-repeat #fff;*/

I would assume it would go into the body since that is where I have always put background images/colors. Any suggestions? Thanks!

Here’s the HTML:

<!doctype html>
<html>
<head>
<meta charset=“UTF-8”>
<title>Untitled Document</title>
<link href=“klear.css” rel=“stylesheet” type=“text/css” />

</head>

<body>

<div id=“wrapper”>
<div id=“content”>
<div id=“header”></div><!–end header–>
<nav>
<a href=“index.html”>home</a>
<a href=“nuklear.html”>nuKlear</a>
<a href=“#”>order</a>
<a href=“#”>contact us</a>
</nav>
</div><!–end content–>
</div><!–end wrapper–>

</body>
</html>

2

You could add something like this:

html, body {height: 100%;}

[ot]For future reference, check out this page for tips on posting code samples:

That makes it easier for us to help you. :slight_smile: [/ot]

3

Unfortunately that will cut off the gradient at vieport height and any content below the fold will have no background. You just need to use html {min-height:100%} and that will allow the gradient to grow with content.

The new gradient syntax though will stretch all over the body


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="klear.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html { min-height:100% }
body {
	font-family: "Trebuchet MS", Verdana, myriad pro, Arial, Helvetica, sans-serif;
	font-size: 14px;
	background: -moz-radial-gradient(#FFF, #00F);
	background: -o-radial-gradient(#FFF, #00F);
	background: -webkit-radial-gradient(#FFF, #00F);
	background: radial-gradient(#FFF, #00F);
}
</style>
</head>

<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>

However its probably better to fix the gradient to the viewport so that it doesn’t stretch off center with the content.

e.g.


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="klear.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html { min-height:100% }
body {
	font-family: "Trebuchet MS", Verdana, myriad pro, Arial, Helvetica, sans-serif;
	font-size: 14px;
	background: -moz-radial-gradient(#FFF, #00F);
	background: -o-radial-gradient(#FFF, #00F);
	background: -webkit-radial-gradient(#FFF, #00F);
	background: radial-gradient(#FFF, #00F);
	background-repeat: no-repeat;
	background-attachment:fixed;
}
</style>
</head>

<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>
4

Thanks Paul for the great solution! And Thanks Ralph for the code basics :slight_smile: Im kinda a newbie all around so any info is greatly appreciated.