I'm looking for some insight on the possibility of hiding a fullscreen background image (which automatically resizes) from top to bottom rather than the usual bottom to top.

For example, you have an image of height 1000px. Let's break this into 4 segments of 250px each. Now say the user is only using a browser sized to 750px. This will hide 250px of your background image. The default nature is to hide the bottom 250px so that you can only see the top 750px in the available space. I'm curious if there's a way to alter that behavior so you see the bottom 750px.

I ask because the most striking part of my background image is the bottom, and it reduces the effect of the page when the bottom 25% is hidden in this example substantially. I could redesign the page, which I'll probably eventually do, but I figured I'd ask about this for future reference anyway. Thanks.

#bg { position:fixed;top:-0%;left:-50%;width:200%;height:200%;margin:auto;  }
#bg img { position:bottom;top:0;left:0;right:0;bottom:0;margin:auto;min-width:50%;min-height:50%;}

<div id="bg">
        <img src="resource/img/bgtest2.png" alt="">
(yea yea I know I should change the png to a jpg)