https://petersmak.com/jquery.ez-bg-resize.js

1/******************************************************
2    * jQuery plug-in
3    * Easy Background Image Resizer
4    * Developed by J.P. Given (http://johnpatrickgiven.com)
5    * Useage: anyone so long as credit is left alone
6******************************************************/
7
8(function($) {
9	// Global Namespace
10    var jqez = {};
11
12    // Define the plugin
13    $.fn.ezBgResize = function(options) {
14		
15		// Set global to obj passed
16		jqez = options;
17		
18		// If img option is string convert to array.
19		// This is in preparation for accepting an slideshow of images.
20		if (!$.isArray(jqez.img)) {
21			var tmp_img = jqez.img;
22			jqez.img = [tmp_img]
23		}
24		
25		$("<img/>").attr("src", jqez.img).load(function() {
26			jqez.width = this.width;
27			jqez.height = this.height;
28			
29			// Create a unique div container
30			$("body").append('<div id="jq_ez_bg"></div>');
31
32			// Add the image to it.
33			$("#jq_ez_bg").html('<img src="' + jqez.img[0] + '" width="' + jqez.width + '" height="' + jqez.height + '" border="0">');
34
35			// First position object
36	        $("#jq_ez_bg").css("visibility","hidden");
37
38			// Overflow set to hidden so scroll bars don't mess up image size.
39	        $("body").css({
40	            "overflow":"hidden"
41	        });
42
43			resizeImage();
44		});
45    };
46
47	$(window).bind("resize", function() {
48		resizeImage();
49	});
50	
51	// Actual resize function
52    function resizeImage() {
53	
54        $("#jq_ez_bg").css({
55            "position":"fixed",
56            "top":"0px",
57            "left":"0px",
58            "z-index":"-1",
59            "overflow":"hidden",
60            "width":$(window).width() + "px",
61            "height":$(window).height() + "px",
62			"opacity" : jqez.opacity
63        });
64		
65		// Image relative to its container
66		$("#jq_ez_bg").children('img').css("position", "relative");
67
68        // Resize the img object to the proper ratio of the window.
69        var iw = $("#jq_ez_bg").children('img').width();
70        var ih = $("#jq_ez_bg").children('img').height();
71        
72        if ($(window).width() > $(window).height()) {
73            //console.log(iw, ih);
74            if (iw > ih) {
75                var fRatio = iw/ih;
76                $("#jq_ez_bg").children('img').css("width",$(window).width() + "px");
77                $("#jq_ez_bg").children('img').css("height",Math.round($(window).width() * (1/fRatio)));
78
79                var newIh = Math.round($(window).width() * (1/fRatio));
80
81                if(newIh < $(window).height()) {
82                    var fRatio = ih/iw;
83                    $("#jq_ez_bg").children('img').css("height",$(window).height());
84                    $("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
85                }
86            } else {
87                var fRatio = ih/iw;
88                $("#jq_ez_bg").children('img').css("height",$(window).height());
89                $("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
90            }
91        } else {
92            var fRatio = ih/iw;
93            $("#jq_ez_bg").children('img').css("height",$(window).height());
94            $("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
95        }
96		
97		// Center the image
98		if (typeof(jqez.center) == 'undefined' || jqez.center) {
99			if ($("#jq_ez_bg").children('img').width() > $(window).width()) {
100				var this_left = ($("#jq_ez_bg").children('img').width() - $(window).width()) / 2;
101				$("#jq_ez_bg").children('img').css({
102					"top"  : 0,
103					"left" : -this_left
104				});
105			}
106			if ($("#jq_ez_bg").children('img').height() > $(window).height()) {
107				var this_height = ($("#jq_ez_bg").children('img').height() - $(window).height()) / 2;
108				$("#jq_ez_bg").children('img').css({
109					"left" : 0,
110					"top" : -this_height
111				});
112			}
113		}
114
115        $("#jq_ez_bg").css({
116			"visibility" : "visible"
117		});
118
119		// Allow scrolling again
120		$("body").css({
121            "overflow":"auto"
122        });
123		
124        
125    }
126})(jQuery);