HTML/CSS中的背景覆蓋格式

我試圖修改我的網站的背景，就像您在代碼中看到的一樣，以使其更具活力。但我掙扎了好幾個小時才發現爲什麼我的背景覆蓋了我擁有的元素。簡而言之，它出現在所有事物的前面。爲什麼會發生？HTML/CSS中的背景覆蓋格式

的style.css

/* General Styles */ 
html{ 
background-color: #fff; 
    background-size: cover; 
    height:100%; 
} 

body { 
    color: #C0C0C0; 
    font-family: Arial, san-serif; 
} 


/* Contact Form Styles */ 
h1 { 
    margin: 10px 0 0 0; 
} 
h4{ 
    margin: 0 0 20px 0; 
} 
#contact-form { 
    background-color:rgba(72,72,72,0.7); 
    padding: 10px 20px 30px 20px; 
    max-width:100%; 
    float: center; 
    left: 50%; 
    position: absolute; 
    margin-top:30px; 
    margin-left: -260px; 
    border-radius:7px; 
    -webkit-border-radius:7px; 
    -moz-border-radius:7px; 
} 
#contact-form input, 
#contact-form select, 
#contact-form textarea, 
#contact-form label { 
    font-size: 15px; 
    margin-bottom: 2px; 
    font-family: Arial, san-serif; 
} 
#contact-form input, 
#contact-form select, 
#contact-form textarea { 
    width:100%; 
    background: #fff; 
    border: 0; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    margin-bottom: 25px; 
    padding: 5px; 
    color: #000; 
} 
#contact-form input:focus, 
#contact-form select:focus, 
#contact-form textarea:focus { 
    background-color: #E5E6E7; 
} 
#contact-form textarea { 
    width:100%; 
    height: 150px; 
} 
#contact-form button[type="submit"] { 
    cursor:pointer; 
    width:100%; 
    border:none; 
    background:#991D57; 
    background-image:linear-gradient(bottom, #8C1C50 0%, #991D57 52%); 
    background-image:-moz-linear-gradient(bottom, #8C1C50 0%, #991D57 52%); 
    background-image:-webkit-linear-gradient(bottom, #8C1C50 0%, #991D57 52%); 
    color:#FFF; 
    margin:0 0 5px; 
    padding:10px; 
    border-radius:5px; 
} 
#contact-form button[type="submit"]:hover { 
    background-image:linear-gradient(bottom, #9C215A 0%, #A82767 52%); 
    background-image:-moz-linear-gradient(bottom, #9C215A 0%, #A82767 52%); 
    background-image:-webkit-linear-gradient(bottom, #9C215A 0%, #A82767 52%); 
    -webkit-transition:background 0.3s ease-in-out; 
    -moz-transition:background 0.3s ease-in-out; 
    transition:background-color 0.3s ease-in-out; 
} 
#contact-form button[type="submit"]:active { 
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.5); 
} 
input:required, textarea:required { 
    box-shadow: none; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    -o-box-shadow: none; 
} 
#contact-form .required { 
    font-weight:bold; 
    color: #E5E6E7;  
} 

/* Hide success/failure message 
    (especially since the php is missing) */ 
#failure, #success { 
    color: #6EA070; 
    display:none; 
} 

/* Make form look nice on smaller screens */ 
@media only screen and (max-width: 580px) { 
    #contact-form{ 
     left: 3%; 
     margin-right: 3%; 
     width: 88%; 
     margin-left: 0; 
     padding-left: 3%; 
     padding-right: 3%; 
    } 
} 

#bg { 
     -moz-transform: scale(1.0); 
     -webkit-transform: scale(1.0); 
     -ms-transform: scale(1.0); 
     transform: scale(1.0); 
     -webkit-backface-visibility: hidden; 
     position: fixed; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100vh; 
     z-index: 1; 
    } 

     #bg:before, #bg:after { 
      content: ''; 
      display: block; 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
     } 

     #bg:before { 
      -moz-transition: background-color 2.5s ease-in-out; 
      -webkit-transition: background-color 2.5s ease-in-out; 
      -ms-transition: background-color 2.5s ease-in-out; 
      transition: background-color 2.5s ease-in-out; 
      -moz-transition-delay: 0.75s; 
      -webkit-transition-delay: 0.75s; 
      -ms-transition-delay: 0.75s; 
      transition-delay: 0.75s; 
      background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("http://www.wise-company.com/pref2/inf_permise/Rezervari/images/overlay.png"); 
      background-size: auto, 256px 256px; 
      background-position: center, center; 
      background-repeat: no-repeat, repeat; 
      z-index: 2; 
     } 

     #bg:after { 
      -moz-transform: scale(1.125); 
      -webkit-transform: scale(1.125); 
      -ms-transform: scale(1.125); 
      transform: scale(1.125); 
      -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out; 
      -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out; 
      -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out; 
      transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out; 
      background-image: url("http://www.wise-company.com/pref2/inf_permise/Rezervari/images/bg.jpg"); 
      background-position: center; 
      background-size: cover; 
      background-repeat: no-repeat; 
      z-index: 1; 
     } 

     body.is-article-visible #bg:after { 
      -moz-transform: scale(1.0825); 
      -webkit-transform: scale(1.0825); 
      -ms-transform: scale(1.0825); 
      transform: scale(1.0825); 
      -moz-filter: blur(0.2rem); 
      -webkit-filter: blur(0.2rem); 
      -ms-filter: blur(0.2rem); 
      filter: blur(0.2rem); 
     } 

     body.is-loading #bg:before { 
      background-color: #000000; 
     } 
* { 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-font-smoothing:antialiased; 
    -moz-font-smoothing:antialiased; 
    -o-font-smoothing:antialiased; 
    font-smoothing:antialiased; 
    text-rendering:optimizeLegibility; 
}

這是風格，我設置這樣的背景下，在HTML文件中，如下：