Untitled

Dynamically changing background color fails
newEle.style.background = "-webkit-gradient(linear, left top, right top, from(#2F2727), to(#FF0000))";

<html>
<head>
</head>
<body>

    <div id="mainContent">
        <p id="test">abcdef</p>
    </div>

</body>
    <script type="text/javascript">
    <!--

        function decimalToHex( num )
        {
           // num is usually a decimal color in form ARGB

           if (num == null || num == "undefined") { return "#FFFFFF"; }

           var intNum = (parseInt(num,10)) & 0x00FFFFFF;
           return "#"+intNum.toString(16);
        }

        var newEle = document.createElement("p");
        newEle.style.backgroundColor = decimalToHex(0); // this fails doesn't set the background color
        //newEle.style.backgroundColor = "#FF0000";       // But this works & sets it to red. Whats wrong with my function?!
        newEle.innerHTML = "kjdskjdkgj";
        document.getElementById("mainContent").appendChild(newEle);
    -->
    </script>
</html>

var s = intNum.toString(16);
while(s.length < 6) s = "0" + s;
return "#" + s;

var intNum = '' + (parseInt(num,10)) & 0x00FFFFFF;
       intNum = intNum.toString(16);
       if (intNum.length < 2) intNum = '0' + intNum;
       return  intNum;

newEle.style.backgroundColor = '#' + decimalToHex(255) +
                                     decimalToHex(0) + decimalToHex(0);