Skip to content

Instantly share code, notes, and snippets.

@motiteux
Created March 9, 2014 16:50
Show Gist options
  • Save motiteux/9450631 to your computer and use it in GitHub Desktop.
Save motiteux/9450631 to your computer and use it in GitHub Desktop.
How to force HTML background to bottom when page is smaller than window (SO)
/**
* How to force HTML background to bottom when page is smaller than window (SO)
* http://stackoverflow.com/questions/12444774/how-to-force-html-background-to-bottom-when-page-is-smaller-than-window
*/
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
background: url(http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
.content { color: white; }
<!-- content to be placed inside <body>…</body> -->
<div class='content'></div>
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment