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
    Apr 2012
    Location
    London
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    background image moving with page scroll

    Hello,

    im experiencing a problem with a image moving with the rest of the page when its not supose to can anyone help me to as what mite fix this ?

    http://ab-websites.com/index.php/ab-blog

    please scroll down the page slightly to see the wrapper for the can appear as you will see it moves with the page scroll and dosent stay nested in its container.

    Cheers,
    Ant.

  • #2
    New Coder
    Join Date
    Apr 2012
    Posts
    67
    Thanks
    12
    Thanked 1 Time in 1 Post
    instead of placing it within the background of the page, place it into a specific position as at the moment it is being told to be in the right x coord but not the y

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Location
    London
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by calsta View Post
    instead of placing it within the background of the page, place it into a specific position as at the moment it is being told to be in the right x coord but not the y
    Hmm im not sure how you mean could be a little more spesific which element are we talking about here i cannot see an unset coord.

    Cheers,
    Ant.

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    67
    Thanks
    12
    Thanked 1 Time in 1 Post
    Quote Originally Posted by AntBentinck View Post
    Hmm im not sure how you mean could be a little more spesific which element are we talking about here i cannot see an unset coord.

    Cheers,
    Ant.
    Can i see the part of the code where the image/background is please

  • #5
    New to the CF scene
    Join Date
    Apr 2012
    Location
    London
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <body>
    <div id="fosters">
    <div id="y">
    <p id="x1"></p><p id="x2"></p><p id="x3"></p><p id="x4"></p><p id="x5"></p><p id="x6"></p><p id="x7"></p><p id="x8"></p><p id="x9"></p><p id="x10"></p><p id="x11"></p><p id="x12"></p><p id="x13"></p><p id="x14"></p><p id="x15"></p><p id="x16"></p><p id="x17"></p><p id="x18"></p><p id="x19"></p><p id="x20"></p><p id="x21"></p><p id="x22"></p><p id="x23"></p><p id="x24"></p><p id="x25"></p><p id="x26"></p><p id="x27"></p><p id="x28"></p><p id="x29"></p><p id="x30"></p><p id="x31"></p><p id="x32"></p><p id="x33"></p><p id="x34"></p><p id="x35"></p><p id="x36"></p><p id="x37"></p><p id="x38"></p><p id="x39"></p><p id="x40"></p><p id="x41"></p><p id="x42"></p><p id="x43"></p><p id="x44"></p><p id="x45"></p><p id="x46"></p><p id="x47"></p><p id="x48"></p><p id="x49"></p><p id="x50"></p><p id="x51"></p><p id="x52"></p><p id="x53"></p><p id="x54"></p><p id="x55"></p>
    <a href="http://www.ab-websites.com" target="_top">
    <img src="images/blog/fosters-can.png" alt="Spinning Beer Can CSS" />
    </a>
    </div>
    </div>
    </body>


    cheers
    Ant

  • #6
    New to the CF scene
    Join Date
    Apr 2012
    Location
    London
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <style type="text/css">
    body
    {
    margin: 0;
    padding: 0;
    overflow: hidden;
    }

    #fosters
    {
    width: 510px;
    height: 400px;
    overflow: auto;
    }

    img
    {
    border: 0;
    margin-left: -172px;
    }

    a
    {
    display: block;
    padding-top: 19px;
    width: 194px;
    }

    a:hover img
    {
    background-image: url();
    background-repeat: no-repeat;
    background-position: 15px 100px;
    }

    div div
    {
    background-image: url(images/blog/fosters-scroll.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    padding-left: 300px;
    width: 660px;
    }

    p
    {
    margin: 0;
    padding: 0;
    float: left;
    height: 336px;
    background-image: url(images/blog/fosters.png);
    background-attachment: fixed;
    background-repeat: repeat-x;
    width: 1px;
    }

    #x1 {background-position: 5px 30px;}
    #x2 {background-position: 0px 30px;}
    #x3 {background-position: -3px 30px;}
    #x4 {background-position: -6px 30px;}
    #x5 {background-position: -8px 30px;}
    #x6 {background-position: -10px 30px;}
    #x7 {background-position: -12px 30px;}
    #x8 {background-position: -14px 30px;}
    #x9 {background-position: -15px 30px;}
    #x10 {background-position: -16px 30px;}
    #x11 {background-position: -17px 30px;}
    #x12 {background-position: -18px 30px;}
    #x13 {background-position: -19px 30px;}
    #x14 {background-position: -20px 30px;}
    #x15 {background-position: -21px 30px;}
    #x16 {background-position: -22px 30px; width: 2px;}
    #x17 {background-position: -23px 30px;}
    #x18 {background-position: -24px 30px; width: 2px;}
    #x19 {background-position: -25px 30px; width: 2px;}
    #x20 {background-position: -26px 30px; width: 2px;}
    #x21 {background-position: -27px 30px; width: 2px;}
    #x22 {background-position: -28px 30px; width: 3px;}
    #x23 {background-position: -29px 30px; width: 3px;}
    #x24 {background-position: -30px 30px; width: 4px;}
    #x25 {background-position: -31px 30px; width: 5px;}
    #x26 {background-position: -32px 30px; width: 7px;}
    #x27 {background-position: -33px 30px; width: 12px;}
    #x28 {background-position: -34px 30px; width: 55px;}
    #x29 {background-position: -35px 30px; width: 11px;}
    #x30 {background-position: -36px 30px; width: 6px;}
    #x31 {background-position: -37px 30px; width: 5px;}
    #x32 {background-position: -38px 30px; width: 4px;}
    #x33 {background-position: -39px 30px; width: 3px;}
    #x34 {background-position: -40px 30px; width: 2px;}
    #x35 {background-position: -41px 30px; width: 3px;}
    #x36 {background-position: -42px 30px; width: 2px;}
    #x37 {background-position: -43px 30px; width: 2px;}
    #x38 {background-position: -44px 30px;}
    #x39 {background-position: -45px 30px; width: 2px;}
    #x40 {background-position: -46px 30px;}
    #x41 {background-position: -47px 30px;}
    #x42 {background-position: -48px 30px;}
    #x43 {background-position: -49px 30px;}
    #x44 {background-position: -50px 30px;}
    #x45 {background-position: -51px 30px;}
    #x46 {background-position: -52px 30px;}
    #x47 {background-position: -53px 30px;}
    #x48 {background-position: -54px 30px;}
    #x49 {background-position: -56px 30px;}
    #x50 {background-position: -58px 30px;}
    #x51 {background-position: -60px 30px;}
    #x52 {background-position: -62px 30px;}
    #x53 {background-position: -65px 30px;}
    #x54 {background-position: -68px 30px;}
    #x55 {background-position: -74px 30px;}
    </style>


  •  

    Posting Permissions

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