Body CSS Gradient that Stops and Continues as Solid Color

Posted by Alfo on Stack Overflow See other posts from Stack Overflow or by Alfo
Published on 2011-11-19T16:21:30Z Indexed on 2011/11/19 17:52 UTC
Read the original article Hit count: 257

Filed under:

css

|

css3

|

linear-gradients

Something similar to this question has been asked here - HTML/CSS Gradient that stops at a perticular height and continues further with a solid color, but as far as I can see this doesn't work when using it on the body for a background color - which is what I want to achieve.

Specifically, I would like it to be light blue at the top of the page, gradient into dark blue 200px further down, and then continue in dark blue for ever.

Thanks to anybody who can help,

Alfo.

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles… >>> More
CSS3 - Validator - RGBA wrong?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using the W3C CSS Validator with the Profile CSS3 but the validator says that my CSS rgba()'s are wrong. I looked up the Color Module Level 3, and the syntax is the same as mine. I also tried the Dev-Validator, same result. Example input: div.class { border: 1px solid rgba(0, 0, 0, 0.5); } Am… >>> More
CSS3 webkit fading in a tooltip.

as seen on Stack Overflow - Search for 'Stack Overflow'
HI, I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's positioned left:-999px;. So basically, what am I doing wrong/is what I was… >>> More
Poll: CSS3 color transparency

as seen on Stack Overflow - Search for 'Stack Overflow'
Many of you already know that you can express colors in your stylesheets like: color: #FFF; color: #FFFFFF; color: rgb(255,255,255); color: hsl(100%,100%,100%); and that you can use rgba() and hsla() to express color transparency. Do you think it would be a good idea to be able to express color… >>> More
Webkit CSS3 for Mozilla

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the equivalent of -webkit-transition: opacity 0.6s linear; in -moz? I tried replacing -webkit with -moz but nothing happened. I even tried extending it to -moz-transition-property/duration but with no success. >>> More