Difference between revisions of "Team:CMUQ/HP/Silver"

Line 1: Line 1:
−
 
+
<!DOCTYPE html>
 
<html>
 
<html>
 
<head>
 
<head>
−
  <style type="text/css">
+
<style>
−
        body{
+
body, html {
−
          height: 100%;
+
    height: 100%;
−
         
+
}
  
−
        }
+
.parallax {
−
        html {
+
    /* The image used */
−
            height: 100%;
+
    background-image: url('https://static.igem.org/mediawiki/2017/a/ac/MG_8285-XL.jpg');
−
        }
+
 
−
        hr{
+
    /* Full height */
−
            width: 20%;
+
    height: 100%;
−
        }
+
 
−
        .main{
+
    /* Create the parallax scrolling effect */
−
        background-image: url("https://static.igem.org/mediawiki/2017/0/04/BackgroundMainPage.png");
+
    background-attachment: fixed;
−
        background-repeat: no-repeat;
+
    background-position: center;
−
background-size: 100%;
+
    background-repeat: no-repeat;
 +
    background-size: cover;
 
}
 
}
−
    </style>5
+
</style>
 
</head>
 
</head>
 
<body>
 
<body>
  
−
<div class="main">
+
<div class="parallax">
 
<p>
 
<p>
−
rkfjl3rj;fljr;lfj;23ljf;lj23;rlfj
+
fklkjrflkj;rfjrf
 +
4fr4rf;lj;lf
 +
4rlfknl3k4j
 +
 
 
</p>
 
</p>
 
</div>
 
</div>

Revision as of 18:26, 13 October 2017

<!DOCTYPE html>

fklkjrflkj;rfjrf 4fr4rf;lj;lf 4rlfknl3k4j

Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.