Showing full height on image (using cover) without full screen browser - html

Question

I only want to add an image (size 1920x1080) in my html for my 1920x1080 screen. The thing is that if I see my web in full screen (F11) it works perfect, but if I see it normally (with the OS' window, browser's bookmarks, etc.) it cuts the image's height. The CSS code used is the following:
html,body{
margin:0;
padding:0;
height:100%;
overflow: hidden;
background-image: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Is there any way to get the image perfectly without full screen? Or to know how much height it takes my window and browser? Because, if not, then other people with the same monitor screen size, but with different browsers and OS, could have different results.

Answer 1

background-size: auto auto;
This will preserve the original size (and will be clipped at the edge). "Cover" always resizes the image to cover the container.
Alternatively, you can check the user's screen size and resize the background accordingly.
html, body {
background-size: auto auto;
}
#media only screen and (max-height: 720px) {
html, body {
background size: 1280px 720px;
}
}
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
}
}
etc.
You can also give the container a "min-height" or a "min-width" in css so the picture won't be cut even if the screen size a bit smaller than what you specified.
Example:
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
min-width: 800px;
min-height: 480px;
}
}

Answer 2

I check different webs to see the effect I described. In all I found there is a cropping effect because of the window of the browser (in the height of the image). Instead of full 1080px height we usually see images cropped in height. So I guess that it is inevitable to crop it a little bit if we don't visit the web in full-screen.
One mini-solution is to decide where should crop it (background-position: center top; crops the bottom part). Other is to make the web with a margin at top (not advised for people visiting with other methods: mobile, full screen, etc.)

Answer 3

The style that maybe can do what you want is background-size: auto 100%;, so it take the height of the browser to the size of the background, maintaining the proportion width.
Try to use this styles, so the image height is always the height of your browser. The bad part is that the image if it doesn't have a big width, it can have white lines at the sides.
html {
height: 100%;
background: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
}