using image as background suggestion

**evan5** · 06-07-2009, 12:38 AM

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!

**saskatchewandav** · 06-07-2009, 03:14 AM

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.

**evan5** · 06-07-2009, 04:09 PM

I wonder if there is a way i can get the page to load before showing up

**rnd me** · 06-08-2009, 04:23 PM

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.

**evan5** · 06-08-2009, 06:42 PM

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

**rnd me** · 06-09-2009, 07:26 PM

Originally Posted by evan5

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").

**evan5** · 06-10-2009, 01:55 AM

ok i will try that and tell you how it goes rnd.
Thanks again for the script! really appreciate it hombre!

**evan5** · 06-10-2009, 01:58 AM

wuw, sumtin wrong with that script man, whenever i put it in head or body, all the symbols actually appear on my page???

**rnd me** · 06-10-2009, 02:36 AM

Originally Posted by evan5

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; 
}

**evan5** · 06-10-2009, 02:54 AM

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?

**rnd me** · 06-10-2009, 03:02 AM

Originally Posted by evan5

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>

**evan5** · 06-10-2009, 03:30 AM

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: using image as background suggestion

Thread Tools

Display

using image as background suggestion

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions