Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 9, 2015 08:08
Show Gist options
  • Save anonymous/e36c0d1ff4dc9fe3c2b2 to your computer and use it in GitHub Desktop.
Save anonymous/e36c0d1ff4dc9fe3c2b2 to your computer and use it in GitHub Desktop.
Download ZIP
Fullscreen backgrounds with centered content Fullscreen backgrounds with centered content // source http://jsbin.com/hixub
Raw
index.html
<!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>
Raw
jsbin.hixub.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%;
}
Raw
jsbin.hixub.js
/* 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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment