I need a one stop solution for my background image in CSS to be in the entire window of my computer-CodePudding

I put this code in my demo .html file

body{
      background-image: url('https://i0.wp.com/www.socialnews.xyz/wp-content/uploads/2020/10/26/5573c6f0bee7ca021f4a8aecbaf6cbeb.jpg?quality=80&zoom=1&ssl=1');

     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
       background-size: cover;
       background-repeat: no-repeat;
       background-size:cover;
       background-position:relative;
       
 }

This image fills the entire Browser window in my desktop but I get some white space below this image when I try to run this code in my Google chrome in my cell phone. I need help regarding this matter

CodePudding user response：

Add:

min-height: 100vh;

And background-position: center;

to your css. Also you can use CSS Media queries to control behaviors on multiple screen sizes.

CodePudding user response：

its all about

height:100%;
width:100%;

if the image is contained in something, make sure that has height and width set to 100% too.

then you set your html tag's style to have margin:0, and ur picture should cover the entire screen:

html, body {
   margin: 0;
}