0

I have written the following code and I simply cannot understand why the image I have setted to be on the background doesn't strech vertically to cover the full page . I would appreciate your help 

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;
}`
loukous
  • 15
  • 1
  • 9
  • What do you more precisely mean by stretching? isn't this result ok? https://codepen.io/ekk0/pen/jQrYzW – Radu Nov 09 '18 at 19:42
  • Since that code sample _cover_ the full page, you need provide some more info what you mean by _stretch_. – Asons Nov 09 '18 at 21:58
  • Looks fine to me, covers the entire page when I run it locally. – rpm192 Nov 09 '18 at 21:58
  • As @Radu mentioned, isn't that result what you expected? If so, you might have a problem with the `Scrolling` wheels, and you thought your background doesn't stretch vertically because you see the `Scrolling` wheels... If I am true, you should remove `overflow-y: scroll;` from your `html` selector! – Elharony Nov 10 '18 at 02:46
  • I probably should have added a link to let you know what I mean. Link to full code https://codepen.io/sissy_dk/pen/aQZXZj – loukous Nov 10 '18 at 07:13
  • why you're adding a child to html and not body? its like adding another child beside . have you tried body:after? you should set height to 100% aswell – Ali Nov 10 '18 at 07:29
  • That link doesn't work, still, you are suppose to provide a [mcve] in the question, not use an external link alone. – Asons Nov 10 '18 at 08:02

1 Answers1

0

Using html:after is like adding a child inside <html> beside your <body> tag, it's not valid and browsers may not render it correctly, it's better using body:after and set height: 100% so it covers your page.

Ali
  • 142
  • 7
  • change `margin: 2% 5% 2% 5%` to `padding: 2% 5% 2% 5%` and set margin to 0, because now we have to add extra space inside body and not outside. – Ali Nov 10 '18 at 07:45
  • ooh thanks so much! it would have taken my forever to find out! – loukous Nov 10 '18 at 07:48