Home/ Questions/Q 6561759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T13:37:38+00:00

I have a html page that needs to expand width and height, so needs

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0