Technique to achieve gradient which can be full height or header only

Question

I'm looking at the heroku website: https://www.heroku.com/

I was curious how they have achieved the ability to have a full page gradient on the home page with content under it, and then on the next page, seemingly with very similar markup, they have been able to keep the exact same section of gradient but applied only to the navigation bar at the top.

How might I get that kind of technique?

• Apply the gradient to the body, and then having a transparent div on the front page?
• Apply the gradient to a full height div, then have a transparent header div on top of it with a white coloured body.

Answer 1

You can use your inspect tool to see their css:

 background-image:
     -webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),
     -webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);

This is just a bit complicated, but not too much: 1) You can have multiple backgrounds, which is often useful as a fallback or for more complex gradients

2) You can set the origin and "destination" of a gradient using percentages or just names like "top right" "bottom" and such, thus avoing having to give an angle - so it's always the same thing, independent of the aspect ratio.

Worth noting is, that they specifically only support webkit (Chrome, Safari), even though I'm pretty sure this could easily be done on any modern browser.

Hope this clears it up a bit.

Answer 2

Demo Header gradient as heroku

Demo Background gradient as heroku

Demo Background gradient in general with all cross browser styles and support

html {
    background: #1e5799;
    /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(61%, #207cca), color-stop(100%, #7db9e8));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
    /* IE6-9 */
    min-height: 100%;
}

Answer 3

Read about "parallax" technology on the web