I have a requirement I am struggling a little with.
The design is (seems) very basic.
These two images illustrate how the image should scale in the browser.
Maybe I’m missing something obvious. I don’t write as much CSS as I used to…
It would be very helpful if you would please post a link to the site. Without seeing your code, we can only guess.
Thanks
- Top section is the navigation. Always the same height.
You can create a scaling background image by setting the width to 100% and leaving the height to find its own level.
I know you said you wanted the height of the browser to be the scaling factor, but if you try to do it that way you won’t have any room beneath for your content as the browser is always full.
The following script loads a very large image to fill the browser viewport while maintaining a fixed width navigation bar at the top of the page. You can see it all working in this jsfiddle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>vlarge pic</title>
<script type="text/javascript">
</script>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#imgWrap { z-index:1; position:absolute; top:0px; left:0px; width:100%; height:100%; }
#navBoxFrm { z-index:10; position:relative; top:0px; left:0px; padding:20px; }
#navBox { width:800px; height:60px; margin:0px auto; background-color:#CCC; }
#textBlk { width:800px; margin:0px auto; }
.a24px { font-size:24px; color:#000; font-weight:bold; text-align:center; }
</style>
</head>
<body>
<div id="navBoxFrm">
<div id="navBox" class="a24px">
Navigation Here</div>
</div>
<div id="imgWrap">
<img border="0" src="http://www.allanp.net/AA/cityscape.jpg" width="100%">
<div id="textBlk">
<p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae
non est numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo
circumferens mortalitem suam, circumferens</p>
<p>testimonium peccati sui et testimonium, quia superbis resistis: et tamen
laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te
delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec requiescat
in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an
laudare te, et scire te prius sit an invocare te. sed quis te invocat nesciens
te? aliud enim</p>
</div>
</div>
</div>
</body>
</html>
Apologies. This is not a live site. It’s a page I will build this week. I’m trying to find a way to conceptually create solve this layout behaviour before I move on.
Yes, but what I’m looking for is the opposite. The background image should always fill the height (minus the absolute set height of the nav section), and leave the width to find it’s own. I tried to illustrate the best I could. 
Only when the page loads. I should have mentioned that.
Hi,
You can do something like this for IE9+ (without js) and uses the display table properties and background-size to achieve the effect.
The content will always below the fold which seems to be what you wanted. The background-size:cover will ensure the image maintains its aspect ratio rather than just get squashed.
Thanks Paul. I need A grade browser support, so I might have exhausted my CSS only options here. It looks like I need the help of JS to get this the right way. The Y axis of the image should always display.
Hi,
You can fill the image quite easily for IE7+ like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
margin:0;
padding:0;
}
html, body { height:100%; }
.wrap { min-height:100%; }
.nav {
height:35px;
background:blue;
color:#fff;
text-align:center;
}
.image {
position:absolute;
top:35px;
left:0;
right:0;
bottom:0;
}
.image img{width:100%;height:100%}
</style>
</head>
<body>
<div class="wrap">
<div class="nav">NAV</div>
</div>
<div class="image"><img id="theImage" src="http://www.pmob.co.uk/mobile/images/a1.jpg" alt ="my car"></div>
<div>
<p>Following content comes here</p>
<p>Following content comes here</p>
<p>Following content comes here</p>
</div>
</body>
</html>
However that loses the aspect ratio of the image unlike my other method so you would need to script that part.
I’m not sure how having the y axis as the basis is going to look especially on narrow and tall viewports.
I might just have to script it, yes. The sides should crop, keeping the aspect ratio.
It’s responsive, so the layout changes for those scenarios.
Have you ever played with the vh unit?
<header style="height: 100vh"> .. </header>
Yes, I’ve played around with it a little bit but it doesn’t really do anything more than I can do already by other means 
(apart from when used in nested elements and then the concept isn’t that useful apart from a few odd cases).
AllapP could improve on this but here’s my attempt at a script resize.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
margin:0;
padding:0;
}
html, body { height:100%; }
.wrap { min-height:100%; }
.nav {
height:35px;
background:blue;
color:#fff;
text-align:center;
}
.image {
position:absolute;
top:35px;
left:0;
right:0;
bottom:0;
overflow:hidden;
}
</style>
</head>
<body>
<div class="wrap">
<div class="nav">NAV</div>
</div>
<div id="image" class="image"><img id="theImage" src="http://www.pmob.co.uk/mobile/images/a1.jpg" alt ="my car"></div>
<div>
<p>Following content comes here</p>
<p>Following content comes here</p>
<p>Following content comes here</p>
</div>
<script type="text/javascript">
function imgResize(){
var el = document.getElementById('image');
var elImg = document.getElementById('theImage');
elImg.style.width='100' + '%';
elImg.style.height='auto';
if (elImg.offsetHeight < el.offsetHeight)
{
elImg.style.width='auto';
elImg.style.height='100' + '%';
}
}
window.onresize = function(){
imgResize();
}
imgResize();
</script>
</body>
</html>
Of course if the window is wide and the viewport height small then you can’t keep the image height at 100% because then the width won’t fit.