Skip to content

Instantly share code, notes, and snippets.

@arvindang

arvindang/jsbin.ajajomU.css

Created October 21, 2013 16:43
Show Gist options
  • Save arvindang/7086930 to your computer and use it in GitHub Desktop.
Save arvindang/7086930 to your computer and use it in GitHub Desktop.
Download ZIP
Find window height, and append section background-image height in CSS to match.
Raw
jsbin.ajajomU.css
section {
margin-bottom: 40px;
}
.main {
background: url(http://img.timeinc.net/time/photoessays/2008/trees/franklin_trees_01.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Raw
jsbin.ajajomU.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<section class="main"></section>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iste modi sint libero excepturi voluptate recusandae ipsam reprehenderit. Illo quis harum eius sint earum rerum magnam cumque maiores nesciunt repellendus.</section>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo eos laborum quam quidem unde iusto hic consequuntur magni vero natus doloremque iure assumenda quis dignissimos accusantium voluptatibus cumque in aperiam.</section>
</body>
</html>
Raw
jsbin.ajajomU.js
mainHeight = $(window).height();
console.log(mainHeight);
$('.main').css({"height": mainHeight});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment