Image visability for background

[justplaindoug]

first off the page in question is http://www.kcrockyhorror.com

As you can see the background is an image- this image includes a pin up girl (no newd- but in a corset so use your discretion- this is in no way an adult site or a questionable photo. But the particularly prude may raise an eyebrow)

My decision to have the girl as part of the jpeg background was so that the image of her did not in anyway alter the size of the window- so as to attempt to keep everything above the fold- as much as it is humanly possible with the glut of browsers and monitors and such.

This was on my laptop at home this weekend that I did it- but now viewing it on my mac at work- which is much higher resolution- the girl isn't the whole height of the page and you can see where her legs cut off mid thigh.

My question is mostly aesthetics and partially technical. Do I just say forget it and let those with the bigger screen which aren't going to be most of my viewers see it? Do I put her in as a seperate element and try to align her to keep her visible only above the cut? Or should I try making her into a flash element so that I can make it resizable upon browser size?

Any advice is appreciated.

[Doctor_Varney]

I think you should keep the figure. It lends excitement to the layout.

Make a div and place her in it. Make the div whatever size - 100% height if you wish, then make a rule

#picture_div img{
height:100%;
}

That will ensure the image is always kept 100% of that div, no matter what size it becomes, due to differing screen sizes.

Wrap the whole caboosh within another container div like so:

#container{
height:100%; width:100%
}

---------------------------------------------

<div id="container">
<!--container start-->
(your site, including:) <div id="picture_div">

<img src="images/bg-image.jpg">

</div>
<!--container end-->
</div>

Try it. See if it works for you. Hope that helps.