After some careful consideration, I finally settled on a suitable title for this dilemma. The issue at hand involves a background image attached to the body element using CSS:
body,html {
height: 100%;
}
body {
background: url("../images/header_lg.jpg") no-repeat;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}
.fullwidth-head {
position: relative;
width: 100%;
height: 100%;
}
.fullwidth-head-inner {
position: absolute;
top: 17%;
left: 11%;
width: 78%;
height: 30%;
background: #c5c5c5; /* just for visibility */
}
In this setup, two divs are utilized. ".fullwidth-head" acts as the container and is positioned relatively at the top of the page by default, while inside it lies another div, ".full-width-head-inner," which is absolutely positioned. While this arrangement works well on desktop screens, transitioning to portrait view causes issues due to the lack of correlation with the resized background image. One workaround considered involved adding an empty .png file of the same size as the body background image to maintain the aspect ratio, but concerns about additional load prevented its implementation.
Below is the minimal HTML code relevant to the discussion:
<body>
<div class="fullwidth-head">
<div class="fullwidth-head-inner">
</div><!-- /.fullwidth-head-inner -->
</div><!-- /.fullwidth-head -->
<!-- js scripts in footer -->
Seeking a solution that does not involve using a blank.png file to adjust the size of the relative container div, any suggestions on how to achieve the desired aspect ratio alignment via CSS?
Thank you.