Background overlays form in HTML/CSS - php

Question

I tried to modify my site's background as you can see in the code, to make it more alive. But I'm struggling for few hours to find out why my background overlays the elements I have. Simply, it comes in front of everything. Why is that happening?
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;
}
This is the style, and I'm setting this background, in the html file, as follow:
<div id="bg"></div>
My website looks like this: http://www.wise-company.com/pref2/inf_permise/Rezervari/inmatriculare.php
Can you figure out why is that happening? Thanks !

Answer 1

It's easy, just change your z-index from 1 to -1 at your div#bg. Will fix it right away.

Answer 2

Try changing the z-index: -1 So that the div with background image will go behind all other elements.