www.webdeveloper.com
Results 1 to 12 of 12

Thread: using image as background suggestion

  1. #1
    Join Date
    Nov 2008
    Posts
    44

    using image as background suggestion

    Hey guys, not 100% sure if this JavaScript but,
    I am trying to put a designed background onto my webpage, instead of just a plain color, and i am assuming that the only way to make it design like is to make the background a picture. And when i tried that before, for some reason when you click on the site, a white screen appears before the picture comes up ( I guess it's loading).

    DO you guys have any suggestions on how I can go around doing this the "classy" way, or is there even a way to possibly have everything load before my webpage appears?

    Appreciate any suggestions or ideas!

  2. #2
    Join Date
    Jun 2009
    Posts
    6
    I might be stating the obvious, but did you get that picture as small in file size as possible? with it still looking good of course...

    Or, try a combination of images, that make it seem like a big background image.

  3. #3
    Join Date
    Nov 2008
    Posts
    44
    I wonder if there is a way i can get the page to load before showing up

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Code:
    <body style="visibility:hidden" onload="document.body.style.visibility='visible';" >
    you can make a tiny version of your image, and stretch it to show the user something right away, adding larger images as the site loads.

  5. #5
    Join Date
    Nov 2008
    Posts
    44
    oh ok, thank you for the suggestion rnd,
    quick question though, where would I place that code? In the css document next to where I have the code for the background image? or in the head section of the html document?

    Thanks again

  6. #6
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by evan5 View Post
    oh ok, thank you for the suggestion rnd,
    quick question though, where would I place that code? In the css document next to where I have the code for the background image? or in the head section of the html document?

    Thanks again
    to do it "properly", it takes a bit more code.

    you can place this code anywhere: head, body, in a script tag or in an external script...

    Code:
    (function(){
       function addEvent( obj, type, fn ) {
    	var ename=  type.replace(/^on/i,"");
    	var resp = obj.attachEvent 	? 
    		 obj.attachEvent( "on" + ename, function(){ return fn.call(obj, window.event )}  ) : 
    		obj.addEventListener(ename, fn, false );
    	if(!resp){ obj["on"+ename] = fn; }
       } 
    
    (function _hideBody(){
      if(document.body){ document.body.style.visibility="hidden";}else{
        setTimeout(arguments.callee, 65);  }
    }())
    
    
    addEvent(window, "load", function(){
       document.body.style.visibility='visible';
    });
    
    }());

    if you add:
    Code:
    body:{ visibility:hidden;}
    to any of your stylesheets (the first one would be ideal), you can delete the dark green section of the code above.
    I wanted to post something that could be cut and pasted anywhere, so i added the style manually with javascript instead of with CSS.


    EDIT:
    actually, i would not use the CSS posted above, use the whole script, alone.
    if someone has javascript disabled, they wont be able to see your site at all!
    but, if you use javascript to hide, it will never get hidden (or "shown").
    Last edited by rnd me; 06-09-2009 at 08:30 PM.

  7. #7
    Join Date
    Nov 2008
    Posts
    44
    ok i will try that and tell you how it goes rnd.
    Thanks again for the script! really appreciate it hombre!

  8. #8
    Join Date
    Nov 2008
    Posts
    44
    wuw, sumtin wrong with that script man, whenever i put it in head or body, all the symbols actually appear on my page???

  9. #9
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by evan5 View Post
    wuw, sumtin wrong with that script man, whenever i put it in head or body, all the symbols actually appear on my page???
    that sounds like a bummer.

    not sure what you mean, or why that's happening.

    i tested ie7, ff3, chrome, and they all worked.
    even if chrome jumped the gun a little bit, it functioned correctly...


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>hide until load</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="author" content="dandavis" />
    <style type='text/css'>
    	body {background-image: url("http://apod.nasa.gov/apod/image/0203/moon_gal_big.jpg"); }
    	
    </style>	
    </head>
    <body>
    
    
    <h1>  hello <table border='111' cellspacing='1' cellpadding='1' summary='' class='table1'>
    	<tr>
    		<th>hjjk</th>
    		<th>jknk</th>
    	</tr>
    	<tr>
    		<td>kjkjk</td>
    
    	</tr>
    </table>	</h1>
      
    <script type='text/javascript'>
    
    
    (function(){
       function addEvent( obj, type, fn ) {
    	var ename=  type.replace(/^on/i,"");
    	var resp = obj.attachEvent 	? 
    		 obj.attachEvent( "on" + ename, function(){ return fn.call(obj, window.event )}  ) : 
    		obj.addEventListener(ename, fn, false );
    	if(!resp){ obj["on"+ename] = fn; }
       } 
    
    (function _hideBody(){
      if(document.body){ document.body.style.visibility="hidden";}else{
        setTimeout(arguments.callee, 65);  }
    }())
    
    
    addEvent(window, "load", function(){
       document.body.style.visibility='visible';
    });
    
    }());
    
    
    window.onload= function (){
    	var something=123;
    }
    </script>
    </body>
    </html>

    EDIT:

    re-reading the original post, i thought of something else.
    you could do something else entirely, and make a full-screen "splash" div, that you hide when the page loads.

    i use it to hold the progress bar on this javascript photo gallery demo page , and it's one way of keeping the user from clicking "Back", building suspense...

    here is the css i used:
    Code:
    #splash { 
      cursor: wait; color: rgb(24, 180, 25); background-color: rgb(65, 56, 87); 
      text-align: center; font-family: tahoma, arial, helvetica, san-serif; font-size:32pt;
      position: absolute;top: -2px; left:-2px; width: 101&#37;; height: 101%; z-index: 59950; 
    }
    Last edited by rnd me; 06-10-2009 at 03:46 AM.

  10. #10
    Join Date
    Nov 2008
    Posts
    44
    hey rnd,
    if i have this: body {background-image: url("http://apod.nasa.gov/apod/image/0203/moon_gal_big.jpg"); }, in a separate css file....all i have to put in the html document in head or body is the:

    <script type='text/javascript'>


    (function(){
    function addEvent( obj, type, fn ) {
    var ename= type.replace(/^on/i,"");
    var resp = obj.attachEvent ?
    obj.attachEvent( "on" + ename, function(){ return fn.call(obj, window.event )} ) :
    obj.addEventListener(ename, fn, false );
    if(!resp){ obj["on"+ename] = fn; }
    }

    (function _hideBody(){
    if(document.body){ document.body.style.visibility="hidden";}else{
    setTimeout(arguments.callee, 65); }
    }())


    addEvent(window, "load", function(){
    document.body.style.visibility='visible';
    });

    }());


    window.onload= function (){
    var something=123;
    }
    </script>


    is that correct? What about the meta?

    I am a little confused, so once i put this in, it will show nothing until the entire document and all its files load?

  11. #11
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by evan5 View Post
    so once i put this in, it will show nothing until the entire document and all its files load?
    that's the goal. that's what i saw in FF and IE and mostly in chrome, the image was visible before the table, but only for a split second...



    just to avoid confusion, you can cut and paste this version below anywhere, along with the CSS how you described.
    Code:
    <script type='text/javascript'>  
    
    (function(){
       function addEvent( obj, type, fn ) {
    	var ename=  type.replace(/^on/i,"");
    	var resp = obj.attachEvent 	? 
    		 obj.attachEvent( "on" + ename, function(){ return fn.call(obj, window.event )}  ) : 
    		obj.addEventListener(ename, fn, false );
       } 
    
    (function _hideBody(){
      if(document.body){ document.body.style.visibility="hidden";}else{
        setTimeout(arguments.callee, 65);  }
    }())
    
    addEvent(window, "load", function(){document.body.style.visibility='visible';});
    
    }());//end hide/unhide wrapper
    
    </script>

  12. #12
    Join Date
    Nov 2008
    Posts
    44
    rnd, i added the script into the head, that didnt seem to work and made everything dissapear, but now that I have it in the body everything is working normally.
    The thing is i dont have my website connected to a host server yet so i can't fully tell if it works, I am waiting to finish it completely. But I have a lot of dynamic mumbojumbo and even music on it so i figure this will enable the entire website to load before the viewers can see it, and keeping it from looking glitchy. I will tell you how it goes once it's up and send you a link man.

    Thanks again for the advice, i appretiate it

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles