html - 画像が縦に伸びない理由

Question

次のコードを書きましたが、背景に設定した画像がページ全体をカバーするために垂直に伸びない理由を理解できません。助けていただければ幸いです

html{
    height: 100%;
    overflow-y: scroll;
}
html:after{
    margin-bottom:0;
    content : "";
    background: url("../images/van1.jpg") no-repeat center center;
    background-size:cover;
    width: 100vw;
    height: 100vh;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: -1;
}`