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 Coder
    Join Date
    Sep 2011
    Location
    Surrey United Kingdom
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Preload large background image, then fade?

    Hello all, i am using CSS to stretch a background image and follow the browser window size, which works great! I came up with the idea to set a solid color (black) as the background color, then once the background image has loaded, fade into it?

    Here is the CSS i am using, if you could modify it somehow, or give some pointers? (Not sure if this should be in another cat, i don't know what needs to be used)


    George

    Code:
    html {
    background: url(images/bg2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    URL removed as requested

    :-)
    Last edited by WA; 07-12-2012 at 03:47 AM.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there cartoongeorge96,

    add this to the head section of the document...
    Code:
    
    <script type="text/javascript">
       var c=100;
       var delay=2000;   /* change this value to suit */
       var speed=30;     /* change this value to suit */
    function init(){
       document.getElementsByTagName('html')[0].style.backgroundColor='#000';
       document.getElementsByTagName('html')[0].style.backgroundSize=c+'%';
       c--;
    if(c<0){
       return;
     }
       setTimeout(function(){init()},speed);
     }
       window.addEventListener?
       window.addEventListener('load',function(){setTimeout(function(){init()},delay)},false):
       window.attachEvent('onload',function(){setTimeout(function(){init()},delay)});
    </script>
    
    The code works well in IE9, Firefox 7 and Safari 5, but Opera 11 reduces size in a slightly jerky manner.

    coothead

    p.s.
    Nice to see another member from Surrey here.

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    Surrey United Kingdom
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey Coothead!

    Thanks for your reply, Chertsey? near thorpe park (which is my actual background) :P

    Anyway, the codes works how i want it to, except it does it back to front, it loads the image then transitions to black. Maybe it was something i did, also can you change the transition to a simple fade?

    Cheers mate, appreciate it!

    Heres the site, i left the code attached.

    URL removed as requested
    Last edited by WA; 07-12-2012 at 03:47 AM.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there cartoongeorge96,

    sorry I misread your post and got it back to front.

    Try this revised code....
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>McCreadieDesign | Home</title>
    <meta name="description" content="Coded by George McCreadie, hello@mccreadiedesign.com">
    <meta name="robots" content="INDEX, FOLLOW">
    <meta name="revisit-after" content="31 Days">
    <style type="text/css">
    body {
       text-align: center;
       margin: 0;   
       background-image: url(images/header.png);
       background-repeat: repeat-x;
       color: #000000;
     }
    html {
        background-color:#000;
        background-repeat:no-repeat;
        background-position:center center;
        background-attachment:fixed;
        background-image:url(images/bg2.jpg);
        background-size: 0;
     }
    div#container {
       width: 994px;
       position: relative;
       margin-top: 0px;
       margin-left: auto;
       margin-right: auto;
       text-align: left;
     }
    #RollOver1 a {
       display: block;
       position: relative;
    }
    #RollOver1 a img {
       position: absolute;
       z-index: 1;
       border-width: 0px;
     }
    #RollOver1 span {
       display: block;
       height: 43px;
       width: 122px;
       position: absolute;
       z-index: 2;
     }
    #RollOver2 a {
       display: block;
       position: relative;
     }
    #RollOver2 a img {
       position: absolute;
       z-index: 1;
       border-width: 0px;
     }
    #RollOver2 span {
       display: block;
       height: 43px;
       width: 122px;
       position: absolute;
       z-index: 2;
     }
    #RollOver3 a {
       display: block;
       position: relative;
     }
    #RollOver3 a img {
       position: absolute;
       z-index: 1;
       border-width: 0px;
     }
    #RollOver3 span {
       display: block;
       height: 43px;
       width: 122px;
       position: absolute;
       z-index: 2;
     }
    #RollOver4 a {
       display: block;
       position: relative;
     }
    #RollOver4 a img {
       position: absolute;
       z-index: 1;
       border-width: 0px;
     }
    #RollOver4 span {
       display: block;
       height: 43px;
       width: 122px;
       position: absolute;
       z-index: 2;
     }
    </style>
    
    <script type="text/javascript">
    function PreloadImages(){
       var imageObj = new Image();
       var images = new Array();
       images[0]="./images/homepressed.png";
       images[1]="./images/designpressed.png";
       images[2]="./images/hostingpressed.png";
       images[3]="./images/aboutpressed.png";
       for (var i=0; i<=3; i++)
       {
          imageObj.src = images[i];
       }
     }
       var c=0;
       var delay=2000;
       var speed=30;
    function init(){
       document.getElementsByTagName('html')[0].style.backgroundSize=c+'%';
       c++;
    if(c>100){
       return;
     }
       setTimeout(function(){init()},speed);
     }
       window.addEventListener?
       window.addEventListener('load',function(){setTimeout(function(){init()},delay)},false):
       window.attachEvent('onload',function(){setTimeout(function(){init()},delay)});
    </script>
    
    <script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function()
    {
       $("#RollOver1 a").hover(function()
       {
          $(this).children("span").stop().fadeTo(500, 0);
       }, function()
       {
          $(this).children("span").stop().fadeTo(500, 1);
       })
       $("#RollOver2 a").hover(function()
       {
          $(this).children("span").stop().fadeTo(500, 0);
       }, function()
       {
          $(this).children("span").stop().fadeTo(500, 1);
       })
       $("#RollOver3 a").hover(function()
       {
          $(this).children("span").stop().fadeTo(500, 0);
       }, function()
       {
          $(this).children("span").stop().fadeTo(500, 1);
       })
       $("#RollOver4 a").hover(function()
       {
          $(this).children("span").stop().fadeTo(500, 0);
       }, function()
       {
          $(this).children("span").stop().fadeTo(500, 1);
       })
    });
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <div id="wb_Text1" style="margin:0;padding:0;position:absolute;left:158px;top:331px;width:405px;height:120px;text-align:left;z-index:0;">
    <font style="font-size:35px" color="#FFFFFF" face="Arial">Epic test site, much?<br>
    
    <br>
    How long for image?</font></div>
    <div id="wb_Text2" style="margin:0;padding:0;position:absolute;left:110px;top:37px;width:256px;height:33px;text-align:left;z-index:1;">
    <font style="font-size:27px" color="#FFFFFF" face="Arial">McCreadie|<b>Design</b></font></div>
    <div id="wb_Image2" style="margin:0;padding:0;position:absolute;left:0px;top:0px;width:162px;height:90px;text-align:left;z-index:2;">
    <img src="images/logo_trans.png" id="Image2" alt="" border="0" style="width:162px;height:90px;"></div>
    <div id="RollOver1" style="position:absolute;overflow:hidden;left:532px;top:43px;width:122px;height:43px;z-index:3">
    <a href="">
    <img class="hover" alt="home" title="home" src="images/homepressed.png" style="left:0px;top:0px;width:122px;height:43px">
    <span><img alt="home" title="home" src="images/home.png" style="left:0px;top:0px;width:122px;height:43px"></span>
    </a>
    </div>
    <div id="RollOver2" style="position:absolute;overflow:hidden;left:631px;top:43px;width:122px;height:43px;z-index:4">
    <a href="">
    
    <img class="hover" alt="home" title="home" src="images/designpressed.png" style="left:0px;top:0px;width:122px;height:43px">
    <span><img alt="home" title="home" src="images/designpng.png" style="left:0px;top:0px;width:122px;height:43px"></span>
    </a>
    </div>
    <div id="RollOver3" style="position:absolute;overflow:hidden;left:742px;top:43px;width:122px;height:43px;z-index:5">
    <a href="">
    <img class="hover" alt="home" title="home" src="images/hostingpressed.png" style="left:0px;top:0px;width:122px;height:43px">
    <span><img alt="home" title="home" src="images/hosting.png" style="left:0px;top:0px;width:122px;height:43px"></span>
    </a>
    </div>
    <div id="RollOver4" style="position:absolute;overflow:hidden;left:849px;top:43px;width:122px;height:43px;z-index:6">
    <a href="">
    <img class="hover" alt="home" title="home" src="images/aboutpressed.png" style="left:0px;top:0px;width:122px;height:43px">
    <span><img alt="home" title="home" src="images/about.png" style="left:0px;top:0px;width:122px;height:43px"></span>
    </a>
    </div>
    </div>
    
    </body>
    </html>
    
    coothead
    Last edited by WA; 07-12-2012 at 03:47 AM.

  • Users who have thanked coothead for this post:

    cartoongeorge96 (09-30-2011)

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    Surrey United Kingdom
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey, thanks for the code mate, just one more thing, could you post the code without my site wrapped round it, i can't seem to find the actual full code :/

    Cheers and sorry for being a pain

    George

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there cartoongeorge96,

    you're not being a pain, we're here to help you.

    To get it to work as you wanted it, I removed this from your code...
    Code:
    
    <link rel="stylesheet" type="text/css" href="css.css" />
    
    .and added this to your embedded CSS...
    Code:
    
    html {
        background-color:#000;
        background-repeat:no-repeat;
        background-position:center center;
        background-attachment:fixed;
        background-image:url(images/bg2.jpg);
        background-size: 0;
     }
    
    ...then changed this...
    Code:
    
    body
    {
       text-align: center;
       margin: 0;
       background-color: #000000;
       background-image: url(images/smallbg.png);
       background-repeat: repeat-x;
       color: #000000;
    }
    
    ...to this...
    Code:
    
    body {
       text-align: center;
       margin: 0;   
       background-image: url(images/header.png);
       background-repeat: repeat-x;
       color: #000000;
     }
    
    I also put all of the your embedded CSS within one....
    Code:
    
    <style type-"text/css">
    
    </style>
    
    ...instead the multitude that you used.
    Finally I removed my original javascript and added the revision to your preload script...
    Code:
    
    <script type="text/javascript">
    function PreloadImages(){
       var imageObj = new Image();
       var images = new Array();
       images[0]="./images/homepressed.png";
       images[1]="./images/designpressed.png";
       images[2]="./images/hostingpressed.png";
       images[3]="./images/aboutpressed.png";
       for (var i=0; i<=3; i++)
       {
          imageObj.src = images[i];
       }
     }
       var c=0;
       var delay=2000;
       var speed=30;
    function init(){
       document.getElementsByTagName('html')[0].style.backgroundSize=c+'%';
       c++;
    if(c>100){
       return;
     }
       setTimeout(function(){init()},speed);
     }
       window.addEventListener?
       window.addEventListener('load',function(){setTimeout(function(){init()},delay)},false):
       window.attachEvent('onload',function(){setTimeout(function(){init()},delay)});
    </script>
    
    I trust this helps.

    coothead


  •  

    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
    •