Edit in JSFiddle

    var a_rect;
    var b_rect;
    var twidth;
    var theight;
    var xscale;
    var yscale;

    window.onload = function () {
    
        var paper = Raphael(0,0,"100%","100%");
        xscale=1;
        yscale=1;
        twidth = $(window).width();
        theight = $(window).height();
        a_rect = paper.rect(0,0,twidth,theight)
        .attr({
            stroke:"none",
            fill:"45-#f00-#808"
        });
        b_rect = paper.rect(0,0,twidth,theight)
        .attr({
            stroke:"none",
            fill:"90-#003-#f00",
            opacity:.1
        });
    };

    window.onresize = function () {
        
        var w = $(window).width();
        var h = $(window).height();
        xscale = w/twidth;
        yscale = h/theight;
        twidth = w;
        theight = h;
        draw();
        
    }
    
    //背景のリサイズ                        
    function draw(){
        a_rect.scale(xscale,yscale,0,0);
        b_rect.scale(xscale,yscale,0,0);
    }

<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script>
<div id="canvas">
    <div class="text">
    GRADIENT
    </div>
</div>

body,html
{
    height:100%;
    margin:0;
}

#canvas 
{
    height:99%;
    background:#000;
    text-align:center;
}

.text{
    letter-spacing: 20px;
    color:#fff;
    font-size:150%;
    width:60%;
    height:60%;
    position:absolute;
    left:20%;
    top:40%;
    z-index:1;
}