Full screen Image Background

- - Design, Kode

Recently, one of clients wanted to create a splash screen effect using a Full screen Image Background. Needless to say this can be pretty simple using a bit of JavaScript/jQuery along with some CSS.

Full screen image backgrounds have become quite useful for creating elegance on websites as well as they can be quite effective tools for displaying broadcast messages. Let’s take a look at the code to create this type of effect. Go to the end of this tutorial for a Demo/Download of the code.


// Apply Full screen Image Backgrounmd
// Full HTML, CSS and JavaScript Code
<html><head>
<style type="text/css">
	body{margin:0px; padding:0px; background:#000;}
	#bg{position:fixed; z-index:1; overflow:hidden;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		fullScreenBG('#bgimg');			
	});
	$(window).resize(function() {
		fullScreenBG('#bgimg');
	});
	
	function fullScreenBG(imgID){
		var winWidth=$(window).width();
		var winHeight=$(window).height();
		var imgWidth=$(imgID).width();
		var imgHeight=$(imgID).height();
		var picHeight = imgHeight / imgWidth;
		var picWidth = imgWidth / imgHeight;
		
		if ((winHeight / winWidth) < picHeight) {
			$(imgID).css("width",winWidth);
			$(imgID).css("height",picHeight*winWidth);
		} else {
			$(imgID).css("height",winHeight);
			$(imgID).css("width",picWidth*winHeight);
		};
		
		$(imgID).css("margin-left",winWidth / 2 - $(imgID).width() / 2);
		$(imgID).css("margin-top",winHeight / 2 - $(imgID).height() / 2);
	}
	
	//$("#bg").fadeIn(1000).fadeOut(3000).fadeIn(1000).fadeOut(2000);
	setTimeout(function(){$("#bg").remove();}, 10000);
	
</script>
</head>
<body>
<div id="bg"><img src="https://project.kodesmart.com/fullscreenbg/graybg.jpg" id="bgimg" style="height: 959px; width: 1278.67px; margin-left: -67.5px; margin-top: 0px;" width="1200" height="900"></div>

For those interested in using a video in place of the background image, here's the tutorial (Adding A Fullscreen Video Background to Your Websites).

DEMODOWNLOAD

 

Post Tags:
Join the Newsletter

Sign up for our personalized daily newsletter

Kodesmart

#1 GUIDE TO DRUPAL, WORDPRESS, CSS AND CUSTOM CODING | BEGINNER TO PRO

Related Posts