Full size background image using CSS cover in mobile devices

fullscreen.css

html {
    background: url(image url) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}

Works great, thanks so much.

Works great with a color but when I tried with a linear-gradient color it doesn't works as expected.
I tried with :
background: linear-gradient(360deg, #000 0%, #fff 200%) no-repeat center center fixed;

Thanks, works great!

Mate, thanks a lot! Works perfectly!

Thanks a lot, It works great!

Hi, this works but overflow:hidden makes me unable to scroll? Any solutions? @yang-wei

A temporary solution I used to solve this problem is specifying overflow for overflow-x and overflow-y separately.

overflow-x: hidden overflow-y: scroll

I tried that method and on the bottom of my website there is some white space. Does this work with any image? NOTE: I am using a portrait image, is that fine?

Fantastic, thank you.

love u =)