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

    Problem with coding image link hover with page scroll

    Hi Guys,

    I'd like to use the code below but have the image(s) attached to the code scroll with the web page so when the user scrolls down the image moves with the page.

    I don't know what code I need nor am I sure where in the code it needs to be.

    Any help is much appreciated.

    Code is:

    <style type="text/css">
    .rollover a { display : block;
    width : 235px;
    height : 49px;
    background-image:url( https://lh5.googleusercontent.com/-F...e+now+bb.jpg); }

    .rollover a:hover { display : block;
    width : 235px;
    height : 49px;
    background-image:url( https://lh6.googleusercontent.com/-X...ble+book.jpg); }
    </style>

    <div class="rollover" > <a href=" BOOK A TABLE - Carmelite " target="_blank" ></a> </div>

  • #2
    New Coder
    Join Date
    Jun 2014
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Blue Fresh!

    If you give the whole container a position of fixed you will achieve this, for example:

    Code:
    .rollover {
    position:fixed;
    }
    You can then go on to positioning the element with 'top, right, bottom, left', for example:

    Code:
    .rollover {
    position:fixed;
    top:0;
    left:0;
    }
    This will be positioned in the top left of your page, and will stick on scroll.

    You can read about css position here:
    CSS position property

    Hope I was of help to you!

    Kieran.

  • #3
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You have to give position fixed then the image will move with the of the page.
    css positioning (must read it)


  •  

    Tags for this Thread

    Posting Permissions

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