Created
November 26, 2014 14:58
-
-
Save soberdash/19cfea1db34436b689d4 to your computer and use it in GitHub Desktop.
Revisions
-
soberdash created this gist
Nov 26, 2014 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,295 @@ <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <meta charset="utf-8"> <title>Fullscreen backgrounds with centered content</title> <meta name="description" content="Fullscreen backgrounds with centered content"> <style id="jsbin-css"> /* background setup */ .background { background-repeat:no-repeat; /* custom background-position */ background-position:50% 50%; /* ie8- graceful degradation */ background-position:50% 50%\9 !important; } /* fullscreen setup */ html, body { /* give this to all tags from html to .fullscreen */ height:100%; } .fullscreen, .content-a { width:100%; min-height:100%; } .not-fullscreen, .not-fullscreen .content-a, .fullscreen.not-overflow, .fullscreen.not-overflow .content-a { height:100%; overflow:hidden; } /* content centering styles */ .content-a { display:table; } .content-b { display:table-cell; position:relative; vertical-align:middle; text-align:center; } /* visual styles */ body{ margin:0; font-family:sans-serif; font-size:28px; line-height:100px; color:#ffffff; text-align:center; } section { background:#9ed100; } .not-fullscreen { height:50%; } </style> </head> <body> <div class="fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6648.jpg');" data-img-width="1600" data-img-height="1064"> <div class="content-a"> <div class="content-b"> Centered content </div> </div> </div> <div class="not-fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg');" data-img-width="1600" data-img-height="1064"> <div class="content-a"> <div class="content-b"> Centered content </div> </div> </div> <section class="not-fullscreen"> <div class="content-a"> <div class="content-b"> Centered content </div> </div> </section> <div class="fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_DSC_3274.jpg');background-position:100% 50%;" data-img-width="1600" data-img-height="1064"> <div class="content-a"> <div class="content-b"> Centered content </div> </div> </div> <section class="fullscreen"> <div class="content-a"> <div class="content-b"> Centered content </div> </div> </section> <div class="fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_9857.jpg');" data-img-width="1600" data-img-height="1064"> <div class="content-a"> <div class="content-b"> <br>Content overflow<br>Content overflow <br>Content overflow<br>Content overflow <br>Content overflow<br>Content overflow <br>Content overflow<br>Content overflow <br><br> </div> </div> </div> <div class="not-fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_8697.jpg');" data-img-width="1600" data-img-height="1064"> <div class="content-a"> <div class="content-b"> Centered content </div> </div> </div> <section class="fullscreen"> <div class="content-a"> <div class="content-b"> Centered content </div> </div> </section> <script id="jsbin-javascript"> /* fix vertical when not overflow call fullscreenFix() if .fullscreen content changes */ function fullscreenFix(){ var h = $('body').height(); // set .fullscreen height $(".content-b").each(function(i){ if($(this).innerHeight() <= h){ $(this).closest(".fullscreen").addClass("not-overflow"); } }); } $(window).resize(fullscreenFix); fullscreenFix(); /* resize background images */ function backgroundResize(){ var windowH = $(window).height(); $(".background").each(function(i){ var path = $(this); // variables var contW = path.width(); var contH = path.height(); var imgW = path.attr("data-img-width"); var imgH = path.attr("data-img-height"); var ratio = imgW / imgH; // overflowing difference var diff = parseFloat(path.attr("data-diff")); diff = diff ? diff : 0; // remaining height to have fullscreen image only on parallax var remainingH = 0; if(path.hasClass("parallax")){ var maxH = contH > windowH ? contH : windowH; remainingH = windowH - contH; } // set img values depending on cont imgH = contH + remainingH + diff; imgW = imgH * ratio; // fix when too large if(contW > imgW){ imgW = contW; imgH = imgW / ratio; } // path.data("resized-imgW", imgW); path.data("resized-imgH", imgH); path.css("background-size", imgW + "px " + imgH + "px"); }); } $(window).resize(backgroundResize); $(window).focus(backgroundResize); backgroundResize(); </script> <script id="jsbin-source-css" type="text/css">/* background setup */ .background { background-repeat:no-repeat; /* custom background-position */ background-position:50% 50%; /* ie8- graceful degradation */ background-position:50% 50%\9 !important; } /* fullscreen setup */ html, body { /* give this to all tags from html to .fullscreen */ height:100%; } .fullscreen, .content-a { width:100%; min-height:100%; } .not-fullscreen, .not-fullscreen .content-a, .fullscreen.not-overflow, .fullscreen.not-overflow .content-a { height:100%; overflow:hidden; } /* content centering styles */ .content-a { display:table; } .content-b { display:table-cell; position:relative; vertical-align:middle; text-align:center; } /* visual styles */ body{ margin:0; font-family:sans-serif; font-size:28px; line-height:100px; color:#ffffff; text-align:center; } section { background:#9ed100; } .not-fullscreen { height:50%; }</script> <script id="jsbin-source-javascript" type="text/javascript">/* fix vertical when not overflow call fullscreenFix() if .fullscreen content changes */ function fullscreenFix(){ var h = $('body').height(); // set .fullscreen height $(".content-b").each(function(i){ if($(this).innerHeight() <= h){ $(this).closest(".fullscreen").addClass("not-overflow"); } }); } $(window).resize(fullscreenFix); fullscreenFix(); /* resize background images */ function backgroundResize(){ var windowH = $(window).height(); $(".background").each(function(i){ var path = $(this); // variables var contW = path.width(); var contH = path.height(); var imgW = path.attr("data-img-width"); var imgH = path.attr("data-img-height"); var ratio = imgW / imgH; // overflowing difference var diff = parseFloat(path.attr("data-diff")); diff = diff ? diff : 0; // remaining height to have fullscreen image only on parallax var remainingH = 0; if(path.hasClass("parallax")){ var maxH = contH > windowH ? contH : windowH; remainingH = windowH - contH; } // set img values depending on cont imgH = contH + remainingH + diff; imgW = imgH * ratio; // fix when too large if(contW > imgW){ imgW = contW; imgH = imgW / ratio; } // path.data("resized-imgW", imgW); path.data("resized-imgH", imgH); path.css("background-size", imgW + "px " + imgH + "px"); }); } $(window).resize(backgroundResize); $(window).focus(backgroundResize); backgroundResize();</script></body> </html> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,53 @@ /* background setup */ .background { background-repeat:no-repeat; /* custom background-position */ background-position:50% 50%; /* ie8- graceful degradation */ background-position:50% 50%\9 !important; } /* fullscreen setup */ html, body { /* give this to all tags from html to .fullscreen */ height:100%; } .fullscreen, .content-a { width:100%; min-height:100%; } .not-fullscreen, .not-fullscreen .content-a, .fullscreen.not-overflow, .fullscreen.not-overflow .content-a { height:100%; overflow:hidden; } /* content centering styles */ .content-a { display:table; } .content-b { display:table-cell; position:relative; vertical-align:middle; text-align:center; } /* visual styles */ body{ margin:0; font-family:sans-serif; font-size:28px; line-height:100px; color:#ffffff; text-align:center; } section { background:#9ed100; } .not-fullscreen { height:50%; } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,51 @@ /* fix vertical when not overflow call fullscreenFix() if .fullscreen content changes */ function fullscreenFix(){ var h = $('body').height(); // set .fullscreen height $(".content-b").each(function(i){ if($(this).innerHeight() <= h){ $(this).closest(".fullscreen").addClass("not-overflow"); } }); } $(window).resize(fullscreenFix); fullscreenFix(); /* resize background images */ function backgroundResize(){ var windowH = $(window).height(); $(".background").each(function(i){ var path = $(this); // variables var contW = path.width(); var contH = path.height(); var imgW = path.attr("data-img-width"); var imgH = path.attr("data-img-height"); var ratio = imgW / imgH; // overflowing difference var diff = parseFloat(path.attr("data-diff")); diff = diff ? diff : 0; // remaining height to have fullscreen image only on parallax var remainingH = 0; if(path.hasClass("parallax")){ var maxH = contH > windowH ? contH : windowH; remainingH = windowH - contH; } // set img values depending on cont imgH = contH + remainingH + diff; imgW = imgH * ratio; // fix when too large if(contW > imgW){ imgW = contW; imgH = imgW / ratio; } // path.data("resized-imgW", imgW); path.data("resized-imgH", imgH); path.css("background-size", imgW + "px " + imgH + "px"); }); } $(window).resize(backgroundResize); $(window).focus(backgroundResize); backgroundResize();