CSS Background Gradient Repeat Issue

All you need is background-attachment property. With this property you can fix the background of the body while your body is filling screen height completely. 

background-attachment:fixed;
height:100%;

Look at my example here http://jsfiddle.net/mohsen/TanzY/

Here is your example fixed: http://jsbin.com/ileqid/4

I removed background-repeat property and also changed colors to be more visual.

If you want your background scrolls then you need to set the background-attachment to scroll. Scroll only happens if you have a tall content so in this example I set the body tag height to 3000px.


Apply your gradients to the html tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css" media="screen">
        html, body {            
            width:100%;
            height:100%;
            margin:0;
            padding:0;}        
        html { 
            background:red -moz-linear-gradient(center top, #316494 0%,red 100%) repeat-x;
            background:red  -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, red)) repeat-x;
        }
        div#TheElement {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #fff;
            left: 2000px;
            top: 2000px;
            border:1px solid #000;
        }    
    </style>    
    </head>
    <body>
        <div id="TheElement">        
        </div>
    </body>
</html>

Tested in FF6, Chrome 13 and Safari 5.

Tags:

Html

Css

Recent Posts