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 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    floating images alongside website

    Hi all,

    I'm trying to float two images that scroll with the page on either side of my webpage (http://bushrangers.x10.bz) and I can't seem to get it to work.

    Where I am at is the following (with an appropriate image of course):

    {background:#000 url(images/image2.jpg) no-repeat center 0}

    I've tried googling css with a number of scripts but can't seem to get it to do what I want. I'm pretty green to the coding side of things but I would appreciate any help. Thanks in advance.
    Last edited by shidoran; 08-16-2010 at 10:47 AM.

  • #2
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts
    hello,
    do you want to have the images outside your current design? and you want them to follow scrolling? For images moving along with scrolling, that would be javascript I think. But you may have a fixed background instead with your two images well placed as the background picture... so that when you scroll down your page, that bg image stays fixed on your screen. See for ex w3 schools.
    The advantage of the second method is that you wont see the pictures shaking as you scroll down... but there wont be any actions on them...
    Last edited by mikacruz; 08-16-2010 at 11:00 AM.

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that's ok a background image will work. I'm about to update the site with what I have, for some reason the image is coming out really thin. This is what I am using:

    <style type="text/css">
    body {background:#000 url(images/STK_Skin_20100412.jpg) no-repeat center 0}
    </style>
    Last edited by shidoran; 08-16-2010 at 11:09 AM.

  • #4
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts
    I cant see that image on the page you have linked to. And for the css, there should be: background-attachment:fixed, as can be understood from the link I wrote down. that link

    best wishes
    Last edited by mikacruz; 08-16-2010 at 11:25 AM.

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the image is the same as:

    http://www.saints.com.au/Portals/0/i...n_20100412.jpg

    I will make my own image the same way but first I need to get it to work

  • #6
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts
    try left-top instead of center, would that work?

    Code:
    {background:#000 url(images/image2.jpg) no-repeat left top;
    background-attachment:fixed;}
    ALSO your body width should be 100 %. That's why your picture is not to the very left. You have a body width of 869 smth pixels..
    Code:
    body{
    cursor:url(http://www.bushrangers.x10.bz/images/bushie.cur);
    width:869px; //change width to 100%
    padding:0 65px;
    margin:0 auto;
    height:100%;
    position:relative
    }
    that also involves changing your layout a tiny bit. Hold on
    Last edited by mikacruz; 08-16-2010 at 11:37 AM.

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ooh we're getting so close thanks for the help!

    Hmm, now I've got a floating window on the left side...
    Last edited by shidoran; 08-16-2010 at 11:38 AM.

  • #8
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts
    ok, you should put all your html code into one div.
    Code:
    <div id="container">all the html inside your body tags</div>
    and then try to add to css:

    Code:
    #container{width: 869px;margin:0 auto;}

  • #9
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    brilliant thanks. Just a little off-center still... now all good!

    Really appreciate it, thanks mate.
    Last edited by shidoran; 08-16-2010 at 11:50 AM.

  • #10
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts
    my fault, put back on center rather than left top :-)

  • #11
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    836
    Thanks
    10
    Thanked 79 Times in 77 Posts
    To float images left and right, you need to set the images in a div with a width and height and use the CSS property: position: fixed;
    Or, using your original CSS:

    Code:
    div#left {
    width: XXpx;
    height: YYpx;
    background: #000 url(images/image2.jpg) no-repeat center fixed;
    bottom: 0;
    left: 0; }
    Adjust for bottom/left or use top/left. You can even use absolute positioning and get it to stick where you want it on the left. Similar CSS for the right image. Other methods can be used.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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