CODEWITHSUNDEEP
cssgradient
Andrew Latham
Andrew Latham

Reputation: 6132

CSS3 Gradient just repeating thin lines a bunch of times

I'm trying to make a gradient background for my website, http://www.lathamcity.com

The problem is, as you can see, it just repeats the blue and cyan a bunch of times instead of making a gradient out of them.

To add to the mystery, when two links are clicked on to open a third div, the gradient suddenly changes. The third div extends below the second one, and the distance between them is occupied by the first gradient color and the rest up to the top of the page is just a normal gradient.

Here's the code I'm using for the gradients.

body{
background-color: #1B0D70;
background-image: linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -o-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -moz-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -webkit-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -ms-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.49, rgb(214,231,232)),
color-stop(0.75, rgb(36,155,171))
);
}

Upvotes: 0

Views: 949

Answers (1)

sandeep
sandeep

Reputation: 92793

Currently your body height is 0px because your most of the element are absolute position.

Write this in your css:

html, body{
 height:100%;
}

Upvotes: 2

Related Questions