Skip to content

Instantly share code, notes, and snippets.

@kathangeorg

kathangeorg/html.html

Created May 21, 2012 07:55
Show Gist options
  • Save kathangeorg/2761057 to your computer and use it in GitHub Desktop.
Save kathangeorg/2761057 to your computer and use it in GitHub Desktop.
Download ZIP
Fullscreen Background (CSS) All Browsers
Raw
html.html
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="path/to/css/ie6-8.css" media="all">
<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="path/to/css/modernAndMobileBrowsers.css" media="all">
<![endif]-->
<!--[if !IE]> -->
<link rel="stylesheet" type="text/css" href="path/to/css/modernAndMobileBrowsers.css" media="all">
<!-- <![endif]-->
Raw
ie6-8.css
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1366px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: absolute;
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1366px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -683px;*/ /* 50% */
}
}
Raw
ie6-8.html
<body>
<img src="path/to/image.jpg" class="bg" />
...
</body>
Raw
modernAndMobileBrowsers.css
/*FULLSCREEN BG*/
html {
background: url(path/to/image.jpg) no-repeat center center fixed;
position fixed;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*FULLSCREEN END*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment