Web background determined by which browser you're using

**BrightStarPro** · 03-08-2010, 03:31 AM

Hi everyone,

I haven't been able to find anykind of script to do what I'm looking for specifically. I'm looking to load a different background based on which browser someone uses to view my website (someone using Firefox would see a background that's different than someone using Internet Explorer for example). I'm assuming a javascript code for browser detection would play a roll in this somehow, but thus far I haven't had much luck. Any have any suggestions?

Thanks in advance

**jscheuer1** · 03-08-2010, 04:58 AM

There is a very easy way to distinguish between IE and everything else:

Code:

<style type="text/css">
body {
	background-image: url(allelse.gif);
}
</style>
<!--[if IE]>
<style type="text/css">
body {
	background-image: url(ie.gif);
}
</style>
<![endif]-->

No javascript required. For the rest of them we have the navigator object and its various properties, as well as various quirks that can be detected. These all (as far as I know) require javascript and many can be spoofed, but generally aren't, and I suppose that even if they were, it wouldn't be that big of a deal for something as innocent as this. See:

http://www.dynamicdrive.com/dynamici...sersniffer.htm

Also check this on Google:

http://www.google.com/search?client=...utf-8&oe=utf-8

Here's one way to detect several popular browsers while setting a background image for each:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	background-image: url(allelse.gif); /* image for all those not detected */
}
</style>
<!--[if IE]>
<style type="text/css">
body {
	background-image: url(ie.gif); /* IE image */
}
</style>
<![endif]-->
<script type="text/javascript">
(function(){
	var browser = '';
	if(/Google/i.test(navigator.vendor)){
		browser = 'chrome.gif'; //Chrome image
	}
	else if(/Apple/i.test(navigator.vendor)){
		browser = 'safari.gif'; //Safari image
	}
	else if(window.opera){
		browser = 'opera.gif'; //Opera image
	}
	else if(typeof document.documentElement.style.MozBinding === 'string'){
		browser = 'mozilla.gif' //Firefox and other Mozilla based browsers image
	}
	if(browser !== ''){
		document.write('<style type="text/css">body { background-image: url(' + browser + '); } <\/style>');
	}
})();
</script>
</head>
<body>

</body>
</html>

**traq** · 03-08-2010, 04:59 AM

You could try jQuery. Keep in mind that the useragent can be faked, confused, and/or missing, so it's not generally reliable - but since you're only talking about a background image, I don't see that being a problem.

Edit: John beat me to it