I want to utilize Bootstrap Carousel as the background for my website. I've successfully incorporated a standard carousel as the background, but I'm encountering difficulties with making fade transitions. Here is my current implementation:
HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
...
<div id="myCarousel" class="carousel slide fill" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div id="first" class="fill"></div>
</div>
<div class="item">
<div id="second" class="fill"></div>
</div>
</div>
</div>
<div class="container">
<div class="signin-form">
<form class="form-signin" method="post" id="login-form">
<h2 class="form-signin-heading" align="center">Login</h2>
<hr />
<div id="error" >
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="User" name="user_name" id="user" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="user_password" id="user_password" />
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="btn-login" id="btn-login">
<span class="glyphicon glyphicon-log-in"></span> Accedi
</button>
</div>
</form>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
CSS:
@import url(https://fonts.googleapis.com/css?family=Cherry+Swash);
body, html{
height:100%;
margin:0;
padding:0;
color:#222;
font-family: 'Cherry Swash', trebuchet ms, cursive;
font-size:1.5em
}
a{color:#930; text-decoration:none}
.form-signin {
max-width: 500px;
padding: 19px 29px 29px;
margin: 20px auto;
margin-top:1%;
background-color: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
background-color:rgba(255,255,255,.7);
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
font-family:Tahoma, Geneva, sans-serif;
color:#990000;
font-weight:lighter;
padding:1em;
border-radius:15px;
box-shadow:4px 4px 10px 0 rgba(20,20,20,.6);
text-shadow: 1px 1px 5px #fff
}
.form-signin .form-signin-heading{
color:#00A2D1;
}
.form-signin input[type="text"],
.form-signin input[type="password"],
.form-signin input[type="email"] {
font-size: 16px;
height: 45px;
padding: 7px 9px;
}
.signin-form, .body-container
{
margin-top:110px;
}
#myCarousel{
position:fixed;
z-index:-1;
}
.item,.active{
height:100%;
-webkit-filter: blur(2px);
}
.carousel-inner{
height:100%;
}
.fill{
width:100%;
height:100%;
background-position:center;
background-size:cover;
}
#first{
background-image: url('../../images/1.jpg');
}
#second{
background-image: url('../../images/2.jpg');
}
JS:
$("#myCarousel").carousel({
interval: 500,
pause: 'none'
});
The Fill class is used to ensure the image fits within the window.
I attempted this solution but couldn't get it to work correctly. Perhaps there was a mix-up in the CSS leading to this issue. Where do you think I went wrong?