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
    New Coder
    Join Date
    Sep 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    background positioning using css

    hi,

    I'm trying to get a picture (my background) to sit at the bottom left of the window no matter what resolution the viewer is using. I was wondering It could be done.

    my actual css concerning body :
    Code:
          body 
    
               {
    
    	       font:11px verdana, arial, helvetica, sans-serif;
    
    	       color:#222;
    
    	       background-color:white;
    	       background-image: url(bg.jpg);
    	       background-attachment: fixed;
    	       background-position:70%;
    	       background-repeat:no-repeat;
    my site is : http://fizzmo.dyndns.org:8080

    if any other information is necessary just ask.

    thanks in advance for your help.

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    For me the picture IS set to the bottom left... (using FF2)
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Same here.... (IE6)

  • #4
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The website doesnt load:S

  • #5
    New Coder
    Join Date
    Sep 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    maybe this picture will explain best what i mean

    I use FF on the left and Opera on the right (only difference is number of bookmarks in the toolbar, which change the size of the visible window)


  • #6
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Try this gopher:

    Code:
     background-position: bottom;
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #7
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe give this a shot...
    Code:
          body {
    	       font:11px verdana, arial, helvetica, sans-serif;
    	       color:#222;
                   background: white url(bg.jpg) bottom left no-repeat;
                }
    That will keep the image plugged into the bottom left of the page at all times.

    Gary

  • #8
    New Coder
    Join Date
    Sep 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried both real quick and the proposition from BWiz is working and the other aint.

    thank you very much for your help

  • #9
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by spok61438 View Post
    the proposition from BWiz is working and the other aint.
    thank you very much for your help
    Sorry, I neglected to add 'fixed' into the mix.

    Try this:
    Code:
          body {
    	       font:11px verdana, arial, helvetica, sans-serif;
    	       color:#222;
                   background: white url(bg.jpg) fixed bottom left no-repeat;
                }
    BWiz's method results portions the headphone image being shoved off to the left and out of the viewport at lower resolutions/browser window sizes...the above doesn't - it keeps the image bottom left, without cutting any of it off, whatever the resolution. Try it, you'll see what I mean.

    Hope that helps,

    Gary

    P.s. only tested in FF

  • #10
    New Coder
    Join Date
    Sep 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you very much for your help dude working as expected

    have a good day


  •  

    Posting Permissions

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