CODEWITHSUNDEEP
csshtmllinear-gradients
Mark A. Donohoe
Mark A. Donohoe

Reputation: 30378

How can I create a linear gradient that covers the entire visible vertical space (or transitions to solid?)

I'm trying to get a linear gradient to work on the body element of my page. Here's the CSS:

body {
    background: linear-gradient(0deg, white, lightgray);
}

However, that produces a gradient from white to light gray as expected, but it's only appearing behind the content, not the 'blank' area below the content that extends to the bottom of the browser window (when the content doesn't completely fill it of course.)

What's more odd is that 'blank' area is set to some 'gray' level that I don't know where it came from, nor how to change it.

To address the latter, I tried this, thinking when the gradient was 'done', it would continue on with the solid color, but this had no effect:

body {
    background: linear-gradient(0deg, white, lightgray);
    background-color: lightgray;
}

If I remove the gradient line, then the entire background changes to lightgray as I would expect, and not that 'random gray' that was there before.

So, how does one do either of these:

  1. Making the gradient extend to the entire window (when the content doesn't reach the bottom) or
  2. Having the end color of the gradient 'continue past' the end to fill the rest of the visible area.

Both would work for me, but I'm stumped.

Upvotes: 0

Views: 1734

Answers (2)

enhzflep
enhzflep

Reputation: 13089

Turns out the code you supplied was almost there. You'll laugh when you see what the change was.

body {
    background: linear-gradient(180deg, white, lightgray) no-repeat;
    background-color: lightgray;
}

I just added "no-repeat" to the background property. The gradient fades from the top of the content to the bottom and is then replaced with the single, solid one.

Here's a snippet showing it in use:

"use strict";
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onWindowLoaded, false);

function onWindowLoaded(evt) {
    doDraw();
}

function doDraw() {
    var can = byId('output');
    var ctx = can.getContext('2d');
    ctx.translate(0.5, 0.5);
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, can.width,can.height);
    ctx.strokeStyle = '#d9d9d9';
    
    ctx.beginPath();

    for (var y = 0; y < can.height; y += 16) {
        ctx.moveTo(0, y);
        ctx.lineTo(can.width, y);
    }
    
    for (var x = 0; x < can.width; x += 16) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, can.height);
    }

    ctx.stroke();
}
body {
    background: linear-gradient(180deg, white, lightgray) no-repeat;
    background-color: lightgray;
}
<canvas id='output' width='241' height='225' />

Upvotes: 0

divy3993
divy3993

Reputation: 5810

That's really odd as you say, background color does occupy whole height of the window, while background gradient does not.

Strange but there is a way/hack if you are fine with specifying some min-height to body.

body {
    margin: 0;
    background: linear-gradient(0deg, white, lightgray) no-repeat;
    background-color: lightgray;
    min-height: 100vh;
}

Note: We have min-height here so it does not matter even if content exceeds window height or if there is no content, it works both ways.

Update:

1vh = 1% of viewport height.

vh is CSS unit.

It basically works with viewport's height. So as we need body to take the whole viewport height regardless of content amount inside body.

So 100vh = 100% of viewport height.

For more on Viewport follow this.

Support: Regarding Viewport Units Support Cross Browsers. You can follow this link.

Hope this helps you.

Upvotes: 1

Related Questions