Currently, I am working on a website that requires a background image, although I personally do not prefer it. The client's preference is to have the navbar transparent so that the background image shows through it. Now, I would like to incorporate a carousel below the navbar without any overlapping. Here is the code I have implemented so far:
/*! Main Page CSS || Created By Thomas Withers @ Ice7Media */
/* Global Styles */
html {
background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
color: #000;
}
h1, h2, h3, h4, h5 {
font-family: 'Oswald', 'Open Sans', sans-serif;
color: #000;
}
p {
font-family: 'Open Sans', sans-serif;
color: #000;
}
/* Global Navbar Formatting */
.navbar {
padding-bottom: 10px;
}
.navbar ul {
margin-top: 20px;
}
.navbar.transparent.navbar-default {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
/* Global Footer Formatting */
/* Home Page Formatting */
/* Full Width Slider Formatting */
/* Carousel base class */
.carousel {
padding-top: 100px;
height: 100%;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of the positioning of img element */
.carousel .item {
height: 500px;
background-color:#bbb;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}
/* Menu's Page Formatting */
/* E-Club Page Formatting */
/* Events Page Formatting */
/* Contact Page Formatting */
As you can see, the desired effect is not being achieved. Any assistance or advice would be greatly appreciated!