I am currently working with code to display an image in a 'scale to fill' manner. I originally used this code for a previous project to set up a background image on a website, and now I want to adjust the positioning to allow scrolling. However, I'm struggling to figure out the correct margins and sizing.
Below is the code snippet:
<div id="Main Page">
<div id="Background">
<img src="http://googledrive.com/host/0By-qb7dZ_m5feE94MkcwSWxLckU" />
<style>
#Background{
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#Background img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
</style>
</div>