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

    Background-image disappears when scrolling

    Hi all,

    I have started designing a website and am using Artisteer template maker for Joomla CMS.

    I wanted to add an image to the website that stays in the bottom left hand corner of the page, even if the page gets scrolled. Unfortunately all my coding attempts failed to achieve the desired outcome. I managed to get the image to stay in the bottom left corner, however once you start scrolling it starts disappearing (as if something is covering it). To see what I mean please have a look at www.vonstrom.com.

    I have seen that others had a similar problem as well, but their suggested fixes don't seem to work on my site! There may be an obvious fix, but I just can't see it, and it's starting to drive me crazy!!!

    Any help you could give me would be greatly appreciated!

    Thank you so much!!
    Bergy

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You should give your element there a position fixed, not a position absolute.
    Code:
    .bg-tulip-png {
    background-attachment:fixed;
    background-image:url(../images/Tulip.png);
    background-position:left bottom;
    background-repeat:no-repeat;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:-1;
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    bergy (05-31-2010)

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply Kor!

    I changed position to fixed, but it didn't do very much. I then changed the position of div-tag in my index.php file and I managed to keep most of the image. But still, now if you scroll all the way down, the bottom of the image is sliced off... what's causing that?

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It's all fixed now! I still had padding value that didn't belong! Thank you!!

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You might need something like
    Code:
    .bg-tulip-png {
    background-attachment:fixed;
    background-image:url("../images/Tulip.png");
    background-position:left bottom;
    background-repeat:no-repeat;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:10;
    }
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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