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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Background img fade in

    A script like this is invoked for each html page presenting a different background picture. How can I extend/modify the script to make the pic fade in when page is loaded?

    window.onload = function()
    {var bodyTag = document.getElementsByTagName("body")[0];
    bodyTag.style.backgroundImage ="url(bilder/bryggsol.jpg)";
    bodyTag.style.backgroundAttachment = "fixed";
    bodyTag.style.backgroundPosition = "100% 100%";
    bodyTag.style.backgroundRepeat = "no-repeat";}

    Grateful for clues

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,602
    Thanks
    24
    Thanked 647 Times in 646 Posts
    Don't use window.onload for a css rule. Add your rule to the css section and make it invisible.

    Use window.onload to call a javascript function to fade the image in.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    you can not fade in a background jmage

    you can only fade suitable elements containing a background image
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,252
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    UlfLag (03-02-2012)

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you!

  • #6
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks!!

  • #7
    New Coder
    Join Date
    Nov 2006
    Location
    Washington, DC
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I'm very new to javascript and is trying to figure out how to modify the scripts in the link to a simple timer so after maybe 2 seconds (or even better, after the image have finished loading), the black screen would fade out revealing the image.

    I have a random image being pulled from a php and it's set to z-index -1 so I think I should be able to apply this javascript to the whole background so that the images would load properly.

    To be honest, I'm a little lost on how to modify the script for this purpose.

  • #8
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Greatful for your effort!!


  •  

    Posting Permissions

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