My current CSS file is named splash.css, with the following code:
html {
background:url(splash.jpg) center no-repeat;
background-size:auto 100%;
}
In addition, I have the following HTML code:
<!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>
My goal is to ensure that the background image (splash.jpg) always matches the height of the browser window, retains its aspect ratio, and overflows slightly beyond the width of the window while remaining centered. However, when I view the page in a browser, the large 1920x1080 image appears to be only around 50px in height, despite the width being proportionate.
While I expected my CSS to achieve the intended effect, it seems there may be some issue causing this discrepancy across both Chrome and Firefox browsers. Any straightforward solutions are appreciated, though I prefer not to rely on JavaScript for this specific behavior.