Utilizing a 1900 x 1080 image within a div as the background
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
html,body {
height:100%;
}
#imageHolder{
background-size:100% auto;
background-image:url(img/bg2.jpg);
width:100%;
height:30%;
}
</style>
</head>
<body>
<div id="imageHolder"></div>
</body>
</html>
On my screen with dimensions of 1366x768, the complete width of the image is displayed while the height gets cropped. The current setup reveals only a portion of the image and I aim to maintain that specific section even when resizing the browser. Currently, any browser size adjustment results in both the div and image being resized, showcasing parts of the image that were initially hidden.
How can I ensure that the same section of the image remains visible, without any additional cropping or expansion, similar to when the browser window is maximized?