October 28, 2019 63 Views 0 Comment

Full screen Image Background

SHARE THIS ARTICLE

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