I currently have the following CSS (called splash.css):
html {
background:url(splash.jpg) center no-repeat;
background-size:auto 100%;
}
And the following HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<TITLE>Test</TITLE>
<link href="splash.css" rel="stylesheet" type="text/css" media="screen" />
</HEAD>
<BODY>
</BODY>
</HTML>
I’m trying to get the background image called splash.jpg to always have the same height as the browser window, and to resize it (keeping its aspect ratio) and allow some of the width to remain outside the browser window. In addition, the background must be centered about the browser window.
Currently I would expect my CSS to do exactly what it’s supposed to do. I’ve set the background to be horizontally and vertically aligned to the center, and I’ve set it to the image it’s supposed to be. I’ve also set the background-size to auto 100% – which, according to Mozilla Developer Network, resizes the image exactly like I want it to be resized.
If the background-size has one auto component and one non-auto component:
If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion. If the image has no intrinsic proportion, use the specified dimension for that dimension. For the other dimension, use the image’s corresponding intrinsic dimension if there is one. If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.
The problem I am facing is that the height of this huge, 1920×1080 image, appears to be around only 50px when I open the HTML in a browser window. The width also appears to be in the right ratio to the height.
At first, I felt it might be some sort of browser-dependent bug – but the page appears pretty much exactly the same in both Chrome and Firefox!
Note – Any other SIMPLE solutions are welcome. I don’t want this behavior to be Javascript dependent – but I don’t mind the solution working only in the latest versions of FF/Chrome.
Add
height: 100%;to yourhtmlstyles.