Skip to content

Instantly share code, notes, and snippets.

@morefromalan

morefromalan/full-gradient-background.html

Created April 18, 2016 22:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save morefromalan/8a4f6db5ce43b5240a6ddab611afdc55 to your computer and use it in GitHub Desktop.
Save morefromalan/8a4f6db5ce43b5240a6ddab611afdc55 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
full-gradient-background.html
<!DOCTYPE html>
<html>
<head>
<title>Full Gradient Background</title>
<style>
.fixed-background {
position:fixed;
margin-left: auto;
margin-right: auto;
top: 0;
width: 100%;
height: 100%;
z-index: -1000;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.blue-gradient-bg {
background: #134659; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
}
body{
margin: 0;
}
</style>
</head>
<body >
<div class="fixed-background blue-gradient-bg"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment