CSS Background Gradient Repeat Issue

Question

I have a html page that needs to expand width and height, so needs to be able to scroll up and down and left and right, however I can't seem to get the css gradient to repeat-x and leave a solid colour downwards.

Stripped down code:

<!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 { 
        height: 100%;
        background-color: #366fcd; }
    body {
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: #366fcd;
        background: -moz-linear-gradient(center top, #316494 0%,#366fcd 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, #366fcd));
        background-repeat: repeat-x;
    }
    div#TheElement {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: #fff;
        left: 2000px;
        top: 2000px;
    }    
</style>    
</head>
<body>
    <div id="TheElement">        
    </div>
</body>
</html>

This runs the gradient into a solid colour (#366fcd) when you scroll down, but when you scroll right, the gradient stops and you see the solid colour there too. See example.

If I remove the background-color: #366fcd; } from the html element, then the gradient repeats along the x-axis as expected, but when you scroll down, the gradient stops and white appears. See example.

I know I could always resort to using a background image, but would prefer to get the CSS working.

Oh yeah, this is tested in Chrome and FF on OSX Lion.

Anthony

Mohsen · Accepted Answer · 2011-09-15 16:59:36Z

29

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.

edited Sep 15, 2011 at 16:59

answered Sep 15, 2011 at 7:51

Mohsen

66.1k37 gold badges164 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Paul D. Waite Over a year ago

Your fixed JSBin example doesn’t seem to work in Chrome 13 on the Mac. when I scroll to the right, the gradient background still disappears.

Mohsen Over a year ago

I fixed that, It was because OP seted css for html tag.

easwee Over a year ago

@Mohsen - looks nice but now the background gradient doesn't scroll and stays static. Might be ok as solution but doesn't fix the exact sample.

Mohsen Over a year ago

Please read the documentation I linked on background-attachment. There is a scroll value for this property too. if you set it to scroll it will scroll. You need a tall body to see the effect. So you can add a very high height to body or insert content on it to see the effect. look at this example: jsbin.com/ileqid/5

easwee · Accepted Answer · 2011-09-15 08:26:47Z

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.

Collectives™ on Stack Overflow

CSS Background Gradient Repeat Issue

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related