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 10 of 10
  1. #1
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts

    Position Image on top of another?

    Hello

    Live site is:

    www.noneforit.com

    I need the login gif to sit ontop of the main background gif but i cant seem to get it to do it.

    Im sure you can see where the login button is meant to go......below the vertical bottom line on the background gif

    Any ideas?

    Thanks

  • #2
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Use the position:relative CSS property on the <div id="loginimg"> and fiddle around with different percentage values till you get it in the correct position.

    It seems a strange way of doing it though, does the login image have to be the background image of a div?? Why not just make it a normal image, and position that...

  • #3
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    I have tried position:relative on both divs, individually and together but it still refuses to work....I have tried margins, padding, top, vertical-align but the button refuses to sit on top of the image.

    Basically I have a background image and will have two link buttons (gif images) which will sit on top of the background image......I have seen it done often before?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Well, you could do it by applying absolute positioning to #loginimg, something like:

    Code:
    #loginimg {
    background-image:url(images/Login%20copy.gif);
    background-repeat:no-repeat;
    height:31px;
    margin:auto;
    position:absolute;
    left:630px;
    top:420px;
    width:98px;
    }
    Another alternative might be to get rid of #backgroundimg, instead setting that image as the background on body, and then positioning the Login image with margins as normal.

  • Users who have thanked SB65 for this post:

    noneforit (06-08-2009)

  • #5
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Works great....Thank You

  • #6
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    hmmmmm.....works until I change the screen resolution at which time the loginimg moves?

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Morning..

    I thought that yesterday you had the #loginimg nested within #backgroundimg - so that #loginimg was positioned absolutely within it. Anyway if you make this change and centre #backgroundimg with a fixed width that should give you what you want:

    Code:
    #backgroundimg {
    background-image:url(images/MainBack%20copy.gif);
    background-position:center center;
    background-repeat:no-repeat;
    height:auto;
    margin:0 auto;
    margin-left:auto;
    min-height:600px;
    position:relative;
    width:700px;
    z-index:1;
    }
    
    #loginimg {main.css (line 24)
    background-image:url(images/Login%20copy.gif);
    background-repeat:no-repeat;
    height:31px;
    left:350px;
    position:absolute;
    top:420px;
    width:98px;
    z-index:3;
    }

  • #8
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Hmmm....have made the change to the CSS that you suggested above and now I dont see the loginimg on the page............unless im losing the plot?

    Maybe its sitting behind the backgroundimg

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You seem to have lost the background image from #loginimg...

    Also, #loginimg needs to be nested within #backgroundimg as above.

  • Users who have thanked SB65 for this post:

    noneforit (06-09-2009)

  • #10
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Working.....very much appreciated


  •  

    Posting Permissions

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