A Pen by lio

Thumbnail
This awesome code was written by liodub, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright liodub ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  lio</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="column">
  <figure class="fixedratio"></figure>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/liodub/a-pen-by-lio-RPqmbq */
div.column {
  /* The background image must be 800px wide */
  max-width: 1920px;
  margin-left: 0px;
}

figure.fixedratio {
  padding-top: 970%;  /* 450px/800px = 0.5625 */
  padding-left:0%;

  background-image: url(https://dl.dropboxusercontent.com/u/4298141/presentation_visual.png);
  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}

Comments