Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    52
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Image visability for background

    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.

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •