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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fixed background images

    Hi,

    I would like to have 2 images in the background. One in the bottom left and the other one in the bottom right. I would like then to be fixed too, so when I'll scroll the images will always be visible.

    Right now my images are at the right position but I can't have them fixed.
    Tried the background-attachment: fixed but it doesn't work.
    Here's what I have:
    Code:
    #left         {background-image: url(http://img158.imageshack.us/img158/9608/lolbackgroundfh2.png);
    		background-attachment: fixed
    		background repeat: no-repeat;
    		width:174px;
    		height:489px;
    		position:absolute;
    		left:0px;
    		bottom:0px;}
    
    #right	     {background-image: url(http://xs227.xs.to/xs227/08204/210649b237.jpg);
    		background-attachment: fixed
    		background repeat: no-repeat;
    		width:156px;
    		height:220px;
    		position:absolute;
    		right:0px;
    		bottom: 0px;}
    If anyone have any other way to fix to images so that they stay there when I scroll i'm open to suggestions.

    Thanks

  • #2
    Banned
    Join Date
    May 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I am a novice, so i am guessing here.
    But you could put them in a div... and then fix that div...

  • #3
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    According to my experience, the background 'snippets' will only work on the 'body' section of your CSS. Your CSS is right, it's just that you can't get these backgrounds to work.

    If you want to try, then I am right saying use <p class="right"></p>.

    Or, have you ended both <div>'s?


    BabyJack
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    If you change the position from absolute to fixed,to the above two selectors, #left & #right, their corresponding elements would be fixed, in standard browsers like FF, Opera etc. (Then no need to apply fixed for the background)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Is something like this want your wanting?

    http://drewsdesigns.com/codingforums...ackground.html

    Drew

    EDIT-
    According to my experience, the background 'snippets' will only work on the 'body' section of your CSS. Your CSS is right, it's just that you can't get these backgrounds to work.
    This is incorrect, you can use background images anywhere in your css, your experience must have just been very bad.
    Last edited by FWDrew; 05-16-2008 at 07:39 AM.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this site .

    http://bonrouge.com/~faq

    CSS
    body {
    background:white url(myimage.jpg) no-repeat 65&#37; 70px fixed;
    }

    Frank
    Last edited by effpeetee; 05-16-2008 at 09:10 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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