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
    Regular Coder
    Join Date
    Jun 2009
    Posts
    351
    Thanks
    75
    Thanked 0 Times in 0 Posts

    Load a css background image last

    in my css file i have set up the following styles on my page


    PHP Code:
    body
    {
        
    min-height:900px;
        
    background-color:#0058A4;
        
    font-familyArialHelveticasans-serif;
        
    color:#555555;
        
    background-imageurl(../images/footerBg1.gif);
        
    background-position:center bottom;
        
    background-repeatrepeat-x;    

    The styles are in a septerate file called stylesheet.css and i have a link to this in the head of my page.

    How do i write some js to make the background image load after all the content on the page is loaded?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    put this just before your closing </body> tag:

    Code:
    <script type="text/javascript">
    document.body.style.background="url(../images/footerBg1.gif) repeat-x center bottom"
    </script>
    and I guess you would want to change your css to this:
    Code:
    body 
    { 
        min-height:900px; 
        background-color:#0058A4; 
        font-family: Arial, Helvetica, sans-serif; 
        color:#555555; 
       }
    this will make the background image start to load after everything else has started to load, but if that image is small and others further up are large, obviously the background may end up finishing loading before others have. give it a go, anyway.
    Last edited by xelawho; 07-02-2012 at 01:13 PM.

  • Users who have thanked xelawho for this post:

    kevinkhan (07-02-2012)

  • #3
    Regular Coder
    Join Date
    Jun 2009
    Posts
    351
    Thanks
    75
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    put this just before your closing </body> tag:

    Code:
    <script type="text/javascript">
    document.body.style.background="url(../images/footerBg1.gif) repeat-x center bottom"
    </script>
    and I guess you would want to change your css to this:
    Code:
    body 
    { 
        min-height:900px; 
        background-color:#0058A4; 
        font-family: Arial, Helvetica, sans-serif; 
        color:#555555; 
       }
    this will make the background image start to load after everything else has started to load, but if that image is small and others further up are large, obviously the background may end up finishing loading before others have. give it a go, anyway.
    This didnt work for me. it left out some of the styles in the main stylesheet.css

    What is wrong with this code

    Code:
    <script type="text/javascript">
    function loadBG(){
        document.getElementsByTagName('body')[0].style.backgroundImage="url(images/footerBg1.gif)";
    }
    window.onload=loadBG();
    </script>


  •  

    Posting Permissions

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