Skip to content

Instantly share code, notes, and snippets.

@leemark

leemark/full-viewport-animated-background.html

Last active March 29, 2023 22:00
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save leemark/5204533 to your computer and use it in GitHub Desktop.
Save leemark/5204533 to your computer and use it in GitHub Desktop.
Download ZIP
Full-screen animated gif background
Raw
full-viewport-animated-background.html
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>horse</title>
<link href='http://fonts.googleapis.com/css?family=Spirax' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Sallie Gardner at a Gallop</h1>
</body>
</html>
Raw
style.css
html {
background: url(http://upload.wikimedia.org/wikipedia/commons/d/dd/Muybridge_race_horse_animated.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
body {
height: 100%;
}
h1 {
font-family: 'Spirax', cursive;
font-size: 1.8em;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity: 0.2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment