Skip to content

Instantly share code, notes, and snippets.

@yratof
Created August 12, 2014 10:45
Show Gist options
  • Select an option

  • Save yratof/5fec966096ef0d3faf5b to your computer and use it in GitHub Desktop.

Select an option

Save yratof/5fec966096ef0d3faf5b to your computer and use it in GitHub Desktop.
Quick holding page logo layout
<head>
<style>
*{margin: 0; padding: 0;}
body {
background-image: url('http://www.marvelipsum.com/1440/920/random');
background-size: cover;
background-attachment: fixed;
min-height: 100vh;
}
.logo{
position: relative;
height: 100%;
margin: 0 auto;
max-width: 600px;
}
.logo img{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="logo">
<img src="http://www.marvelipsum.com/650/620/random" />
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment