Gradient Background?

LemonInflux · September 20, 2007

Not sure if this is HTML or CSS, but I think, if it's possible, it can be done in standard markup.

Can you have a gradient page background? I don't mean with a repeated image, I mean I want, say, #CCCCCC in the top right, then #000000 in the bottom left (just an example). Is this possible? I haven't found anything that says it is, however :-\

php_tom · September 22, 2007

That's something I've often wanted to do, just never had the time to figure it out... but you inspired me to do so .

I think the only way is to do it in JavaScript. Check out the script I put together below, it basically makes a table where the BG color of each cell gradually shifts. Then your HTML code goes on top of that. Not pretty but it works.

I tested it in FF, Opera, and IE6, not sure about other browsers, but it works in those.

<html>
<body style='margin:0px;padding:0px;'>
<script>

// Starting RGB color values, these should be 0-255.
var startR = 100;
var startG = 100;
var startB = 100;

// Ending RGB color values, these should be 0-255.
var endR = 200;
var endG = 200;
var endB = 200;

// How wide each gradient element box should be. Smaller number makes a 
// more seamless gradient, but takes longer to render.
var grain = 15;

// Here's the meat of the script:
// 1) Get the window height and width
var width, height;
// Window dimensions:
if (window.innerWidth) 
  width=window.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth) 
  width=document.documentElement.clientWidth;
else if (document.body) 
  width=document.body.clientWidth;
if (window.innerHeight) 
  height=window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight) 
  height=document.documentElement.clientHeight;
else if (document.body) 
  height=document.body.clientHeight;
height = height-14;

// 2) Write out a table with each cell's Background a bit different from the last.
document.write("<table width='100%' height='100%' cellspacing='0' cellpadding='0'>");
for(var y=0;y<height;y+=grain) {
  document.write("<tr height='" + grain + "'>");
  for(var x=0;x<width;x+=grain) {
    colorR = startR + Math.round((endR-startR)*(x+y)/(width+height));
    colorG = startG + Math.round((endG-startG)*(x+y)/(width+height));
    colorB = startB + Math.round((endB-startB)*(x+y)/(width+height));
    color = "#" + dec2hex(colorR) + dec2hex(colorG) + dec2hex(colorB);
    document.write("<td width='" + grain + "' bgcolor='" + color + "' ></td>");
    //if(x==y) alert((x+y)/(width+height));
  }
  document.write("</tr>");
}
document.write("</table>");

// A function useful for getting the hex color string
function dec2hex(n){
    n = parseInt(n); var c = 'ABCDEF';
    var b = n / 16; var r = n % 16; b = b-(r/16); 
    b = ((b>=0) && (b<=9)) ? b : c.charAt(b-10);    
    return ((r>=0) && (r<=9)) ? b+''+r : b+''+c.charAt(r-10);
}
</script>

<!-- Don't remove the following line! -->
<div id='bodyText' style='position:absolute; top:0px; z-index:2; margin: 20px; width:97%;'>


<p>The HTML of the page goes here...</p>


<!-- Don't remove the following line! -->
</div>

</body>
</html>

Hope that helps.

jbingman · September 23, 2007

The easiest way to do that is using photoshop. Make a 2 px wide by maybe 1500px long and make the gradient. Then just set that image as the background.

php_tom · September 23, 2007

That will only give you a vertical/horizontal gradient, not a diagonal as LemonInflux said he wanted.

Sign In

Gradient Background?

Recommended Posts

LemonInflux

Link to comment

Share on other sites

php_tom

Link to comment

Share on other sites

jbingman

Link to comment

Share on other sites

php_tom

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information