CSS3 Gradient just repeating thin lines a bunch of times?

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

Up vote 0 down vote favorite share g+ share fb share tw.

I'm trying to make a gradient background for my website, 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)) ); } css css3 gradient link|improve this question asked Dec 27 '11 at 4:39Andrew Latham25811 100% accept rate.

1 Glad you got your answer however I would like to chip in that you are suing tables for your layout on your page. This is a really outdated way of mark up, an is really bad for accessibility. If you have time try and take a look out using divs for layout article explaining why coding.smashingmagazine.com/2009/04/08/… – Dominic Green Dec 27 '11 at 4:50 Thanks, I'll read it for sure!

– Andrew Latham Dec 27 '11 at 4:57 Cool it will save you time in the long run good luck – Dominic Green Dec 27 '11 at 5:02.

Currently your body height is 0px because your most of the element are absolute position. Write this in your css: html, body{ height:100%; }.

That did the trick! So what exactly was wrong with this and how did the problem come about? – Andrew Latham Dec 27 '11 at 4:47 body contain inner content height like DIV etc. So, if there no content or element are absolute like in your example.

Then the default height of the body is 0px – sandeep Dec 27 '11 at 4:56.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.