Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trying to get image at very bottom left of viewport

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #24564
    /dev/null
    Member

    How would I get an image to be at the very bottom-left corner of the viewport? I tried making a div with height and width 100% and making it the background, but that only put it at the corner of the space used by the layout.

    Code:
    #bg
    {
    width: 100%;
    height: 100%;
    background-image: url(“../img/logo_watermark.png”);
    background-repeat: no-repeat;
    background-position: bottom left;
    }
    #56143
    apostrophe
    Participant

    So long as your div#bg is not inside any relatively positioned divs in your markup then you can do this:

    Code:
    #bg {
    background: url(“../img/logo_watermark.png”) no-repeat;
    width: width of image px;
    height: height of image px;
    position: absolute;
    left: 0;
    bottom: 0;
    }
    #56150
    /dev/null
    Member
    "apostrophe" wrote:
    So long as your div#bg is not inside any relatively positioned divs in your markup then you can do this:

    Code:
    #bg {
    background: url(“../img/logo_watermark.png”) no-repeat;
    width: width of image px;
    height: height of image px;
    position: absolute;
    left: 0;
    bottom: 0;
    }

    Unfortunately, it is necessary for my body to be relatively positioned (and #bg is directly in the body).

    #56155
    apostrophe
    Participant

    Bottom left of the body is bottom left of the viewport.

    #56433
    /dev/null
    Member

    But you said that it won’t work if #bg’s parent is relatively positioned.

    #56434
    Soh Tanaka
    Member

    position relative on your body, is the same thing.

    Do what apostrophe said and it should def work. Im assuming apostrophe was considering there may be parent divs that you had that had a relative position.

    #56435
    apostrophe
    Participant
    Quote:
    Do what apostrophe said and it should def work. Im assuming apostrophe was considering there may be parent divs that you had that had a relative position.

    Exactly. Although I suppose that technically it is, I don’t really consider the body to be a div. So long as your #bg isn’t inside any other divs in your markup eg. a container wrap then it will position absolutely, relative to the body whether you specify the body as position:relative or not.
    Perhaps these 2 articles will help you understand positioning http://css-tricks.com/absolute-positioning-inside-relative-positioning/ and http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

    #56493
    /dev/null
    Member

    Odd. It doesn’t work for me. Here’s the image of what it looks like (ff 3.0.8 on ubuntu 8.10)

    #56495
    apostrophe
    Participant

    I see it’s on localhost so you can’t give us a link, could you post your code?

    #56505
    /dev/null
    Member

    relevant css:

    Code:
    body
    {
    background-image: url(“../img/bg.png”);
    background-color: #2e3436;
    line-height: 1.3076923076923077em;
    position: relative;
    }

    #bg
    {
    background: url(“../img/logo_watermark.png”) no-repeat;
    width: 197px;
    height: 166px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0 !important;
    }

    html

    Code:

    –snip–

    #56512
    apostrophe
    Participant

    Well I just tried this with an old page I had on my hard drive. Without position: relative on the body it works perfectly and with position: relative on the body it stays on the extreme left of the window but only goes as low as the content, which I must admit surprised me.
    So the question is why do you need that position: relative on the body? Try removing it.

    #56528
    /dev/null
    Member

    I need my body to be relatively positioned so my sidebar remains as tall as my main content. If I remove it, the sidebar will be all out of whack (it’ll extend all the way up and down).

    #56529
    apostrophe
    Participant

    Interesting approach. New one to me.

    You might want to look at some of the more traditional methods
    http://www.alistapart.com/articles/fauxcolumns/
    http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
    or even jQuery
    http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
    Otherwise I really don’t see how you can have your #bg in the bottom left corner.

    #56537
    /dev/null
    Member

    Thanks. I don’t quite remember where I got this method (maybe from css tricks?) but I’ll take a look at those.

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.