Results 1 to 3 of 3

Thread: Fullscreen Background Image: Scroll/Hide behavior: top instead of bottom

  1. #1
    Join Date
    Jul 2008

    Fullscreen Background Image: Scroll/Hide behavior: top instead of bottom

    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)

  2. #2
    Join Date
    Jul 2008
    Site in question: www.artfuladvection.com . Currently, the window needs to be sized so that the horizontal/vertical are roughly the same size in order to see the bottom of the image. I'd really like to alter this behavior - but I'm not sure if its possible.

    This is where the CSS is at now:
    #bg { position:fixed;top:0&#37;;left:-50%;width:200%;height:200%;margin:auto;  }
    #bg img { position:bottom;top:0;left:0;right:0;bottom:0;margin:auto;min-height:0%;min-width:50%;}
    Last edited by mith36; 04-16-2012 at 12:17 AM.

  3. #3
    Join Date
    Jul 2008
    I found the answer here... http://stackoverflow.com/questions/3...even-scrolling

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Recent Articles