Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Background Gradient Repeat Issue

Tags:

html

css

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

like image 317
littlecharva Avatar asked Sep 15 '11 07:09

littlecharva


People also ask

How do you stop a gradient repeating in CSS?

A percentage of 0% , or a length of 0 , represents the start of the gradient; the value 100% is 100% of the image size, meaning the gradient will not repeat.

Can you create repeated patterns with radial gradient in background color?

Because <gradient> s belong to the <image> data type, they can only be used where <image> s can be used. For this reason, repeating-radial-gradient() won't work on background-color and other properties that use the <color> data type.

How do I make my background repeat vertically?

The repeat-y property is used to set the background image repeated only vertically.


2 Answers

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.

like image 68
Mohsen Avatar answered Oct 10 '22 10:10

Mohsen


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.

like image 44
easwee Avatar answered Oct 10 '22 11:10

easwee