Difference between revisions of "Team:UM Macau/Experiments"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
 
+
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
 
<style>
−
html,body{
+
body, html {
−
height: 100%;
+
  height: 100%;
−
width: 100%;
+
  margin: 0;
−
background-color: #131111;
+
−
color: white;
+
−
scroll-behavior: smooth;
+
−
font-family:"Poppins";
+
−
overflow-x: hidden;
+
 
}
 
}
  
−
#home{
+
.bg {
−
background: url(https://static.igem.org/mediawiki/2019/c/cd/T--UM_Macau--homepicnew1.png) no-repeat center;
+
  /* The image used */
−
display: table;
+
  background-image: url(https://static.igem.org/mediawiki/2019/c/cd/T--UM_Macau--homepicnew1.png);
−
height: 100% !important;
+
 
−
position: relative;
+
  /* Full height */
−
width: 100% !important;
+
  height: 100%;  
−
background-size: cover;
+
 
−
text-align: center;
+
  /* Center and scale the image nicely */
 +
  background-position: center;
 +
  background-repeat: no-repeat;
 +
  background-size: cover;
 
}
 
}
−
 
 
</style>
 
</style>
−
 
−
 
 
</head>
 
</head>
−
 
 
<body>
 
<body>
  
−
<div id="home" class="w-100 h-100">
+
<div class="bg"></div>
  
−
</div>
+
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
  
 
</body>
 
</body>
−
<html>
+
</html>

Revision as of 18:10, 11 October 2019

This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.