Background color not 100% high!

Discussion in 'HTML' started by Yauw, Sep 17, 2006.

  1. Yauw

    Yauw Guest

    Can someone figure out how I can get the background color to not stop short
    at the bottom of the page when an image longer than the viewable screen is
    displayed?! Woks great if the image is small though (in Firefox anyway).

    Thanks


    <html>
    <head>
    <style type="text/css">
    ..translucent
    {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgb(213, 200, 156);
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity: 0.5;
    z-index: 10001;
    }

    </style>
    <script>
    <!-- Begin
    function toggle(id)
    {
    if ( document.getElementById)
    {
    var layer = document.getElementById(id);
    layer.style.display = (layer.style.display == 'none') ? 'block' : 'none';

    if (id=='logo')
    {
    var b= document.getElementById('btnClose');
    b.style.position = "absolute";
    b.style.top=0;
    b.style.left=parseInt(b.offsetParent.offsetWidth) -
    parseInt(b.offsetWidth);

    }
    }
    }

    // End -->
    </script>
    </head>
    <body>
    <center>
    <a href="#" onclick="toggle('blockUI');toggle('logo');">Click to
    enlarge</a>

    <div id = "logo" style="display:none; position: absolute; left: 200px;
    top: 100px; z-index: 55000">
    <a id="btnClose" href="#" onclick="toggle('blockUI'); toggle('logo');
    "><img src="/images/close.gif" border="0" /></a>
    <img src="/images/400x650.jpg" border=0 alt="" />
    </div>

    <div id="blockUI" class="translucent" style="display: none;
    width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;
    z-index: 50000;"
    onclick="return false" onmousedown="return false"
    onmousemove="return false"
    onmouseup="return false" ondblclick="return false">
    </div>
    </center>
    </body>
    </html>
    Yauw, Sep 17, 2006
    #1
    1. Advertising

  2. "Yauw" <> skrev i meddelandet news:1qaPg.1160$wU4.904@trnddc06...
    > Can someone figure out how I can get the background color to not stop

    short
    > at the bottom of the page when an image longer than the viewable screen is
    > displayed?! Woks great if the image is small though (in Firefox anyway).
    >
    > Thanks
    >
    >
    > <html>
    > <head>
    > <style type="text/css">
    > .translucent
    > {
    > top: 0px;
    > left: 0px;
    > width: 100%;
    > height: 100%;
    > position: absolute;
    > background-color: rgb(213, 200, 156);
    > filter:alpha(opacity=50);
    > -moz-opacity:0.5;
    > opacity: 0.5;
    > z-index: 10001;
    > }



    I see that there are many options for images (filter, moz-opacity, opacity,
    z-index) which you can style.
    Do you perhaps have any good reference where I could read something more on
    this subject?


    --
    Luigi Donatello Asero
    https://www.scaiecat-spa-gigi.com/it/svezia.html
    我是æ„大利人
    Luigi Donatello Asero, Sep 17, 2006
    #2
    1. Advertising

  3. Yauw wrote:

    > Can someone figure out how I can get the background color to not stop
    > short at the bottom of the page when an image longer than the
    > viewable screen is displayed?!


    Please do you homework to help others to help you: remove the irrelevant
    parts (like client-side scripting etc.) from the document where the problem
    appears, and post the URL.

    > Woks great


    I like woks too.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Sep 17, 2006
    #3
  4. Yauw

    Neredbojias Guest

    To further the education of mankind, "Yauw" <> vouchsafed:

    > Can someone figure out how I can get the background color to not stop
    > short at the bottom of the page when an image longer than the viewable
    > screen is displayed?! Woks great if the image is small though (in
    > Firefox anyway).
    >
    > Thanks
    >
    >
    > <html>
    > <head>
    > <style type="text/css">
    > .translucent
    > {
    > top: 0px;
    > left: 0px;
    > width: 100%;
    > height: 100%;
    > position: absolute;
    > background-color: rgb(213, 200, 156);
    > filter:alpha(opacity=50);
    > -moz-opacity:0.5;
    > opacity: 0.5;
    > z-index: 10001;
    > }
    >
    > </style>

    ....

    Remove the 100% height.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Sep 18, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. fig000
    Replies:
    0
    Views:
    4,533
    fig000
    Sep 6, 2004
  2. Kamaljeet Saini
    Replies:
    0
    Views:
    390
    Kamaljeet Saini
    Feb 13, 2009
  3. fred
    Replies:
    3
    Views:
    261
    Zifud
    Mar 17, 2005
  4. Replies:
    1
    Views:
    258
    marss
    Feb 14, 2007
  5. Replies:
    5
    Views:
    869
Loading...

Share This Page