bootstrap carousel slider - move only the slider, not content too - html

.carousel {
position: relative;
height: 500px;
.carousel-inner .item {
height: 500px;
}
.carousel-indicators > li {
margin: 0 2px;
background-color: $maincolor;
border-color: $maincolor;
opacity: .7;
&.active {
width: 10px;
height: 10px;
opacity: 1;
}
}
}
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.logo{
margin-bottom:-5%;
width:300px;
}
}
.btn {
&.btn-lg {
padding: 10px 40px;
}
&.btn-hero {
color: #f5f5f5;
background-color: $maincolor;
border-color: $maincolor;
outline: none;
margin: 20px auto;
&:hover, &:focus {
color: #f5f5f5;
background-color:$secondcolor;
border-color: $secondcolor;
outline: none;
margin: 20px auto;
}
}
}
.carousel .slides {
.slide-1, .slide-2, .slide-3 {
height: 500px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.slide-1 {
background-image: url(http://i.imgur.com/CK3d6nV.jpg);
}
.slide-2 {
background-image: url(http://i.imgur.com/SlHr4zn.jpg);
}
.slide-3 {
background-image: url(http://i.imgur.com/OAMaVRo.jpg);
}
}
#media screen and (min-width: 980px) {
.hero {
width: 980px;
}
}
#media screen and (max-width: 640px) {
.hero h1 {
font-size: 4em;
}
}
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<hgroup>
<img class="logo" src="images/Logo.png" alt="LOGO">
<h3>Lorem ipsum dolor sit amet</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Lorem</button>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
</div>
<div class="item slides">
<div class="slide-3"></div>
</div>
</div>
</div>
I am using bootstrap carousel.I am also using Scss to my code.I want to make only the slides to move as they do, from right to left, but not content from the class too.I want that content to stay in place all the time.How can I do it ?


I hope i got your question right:
the standard bootstrap with an static caption:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 500px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- start -->
<div class="carousel-caption">
<h3>Headline</h3>
<p>Tex Tex Tex Text.</p>
</div>
<!-- END -->
<div class="item active">
<img src="http://i.imgur.com/CK3d6nV.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://i.imgur.com/SlHr4zn.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://i.imgur.com/OAMaVRo.jpg" alt="Flower" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
But you want to use your classes and no image tags:
then you cant use emtpy divs. Use span instead.
html:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 500px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-caption">
<div class="hero">
<hgroup>
<img class="logo" src="images/Logo.png" alt="LOGO">
<h3>Lorem ipsum dolor sit amet</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Lorem</button>
</div>
</div>
<div class="item slides active">
<span class="carussel slide slide-1"></span>
</div>
<div class="item slides">
<span class="carussel slide slide-2"></span>
</div>
<div class="item slides">
<span class="carussel slide slide-3"></span>
</div>
</div>
<!-- Left and right controls -->
</div>
</div>
</body>
</html>
css part
.carousel {
position: relative;
height: 500px;
.carousel-inner .item {
height: 500px;
}
.carousel-indicators > li {
margin: 0 2px;
background-color: $maincolor;
border-color: $maincolor;
opacity: .7;
.active {
width: 10px;
height: 10px;
opacity: 1;
}
}
}
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.logo{
margin-bottom:-5%;
width:300px;
}
}
.btn {
&.btn-lg {
padding: 10px 40px;
}
&.btn-hero {
color: #f5f5f5;
background-color: $maincolor;
border-color: $maincolor;
outline: none;
margin: 20px auto;
&:hover, &:focus {
color: #f5f5f5;
background-color:$secondcolor;
border-color: $secondcolor;
outline: none;
margin: 20px auto;
}
}
}
.item .slides, .slide-1, .slide-2,.slide-3{
display:inherit;
height:500px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.slide-1 {
background-image: url(http://i.imgur.com/CK3d6nV.jpg);
}
.slide-2 {
background-image: url(http://i.imgur.com/SlHr4zn.jpg);
}
.slide-3 {
background-image: url(http://i.imgur.com/OAMaVRo.jpg);
}
}
#media screen and (min-width: 980px) {
.hero {
width: 980px;
}
}
#media screen and (max-width: 640px) {
.hero h1 {
font-size: 4em;
}
}
And here you could see it live:
http://codepen.io/anon/pen/pNRrPm


Why don't you just have the content you want to be in a seperate div positioned absolutely in the middle of the screen and give it a higher z-index? then it wont go anywhere.


Place <div class="hero"></div>outside of carousel item , make it absolute positioned.
<div style="position:relative">
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
</div>
<div class="item slides">
<div class="slide-2"></div>
</div>
<div class="item slides">
<div class="slide-3"></div>
</div>
</div>
<div class="hero">
<hgroup>
<img class="logo" src="images/Logo.png" alt="LOGO">
<h3>Lorem ipsum dolor sit amet</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Lorem</button>
</div>
</div>

Related

Bootstrap carousel not aligning when in previous buttons

while studying of bootstrap to navbar menus and carousel, i encountered this problem i tried something changing some codes but it doesnt worked. explain to me what is happen and which one is error. you can run the snippet to see what happen to my carousel
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.opaque-navbar').addClass('opaque');
} else {
$('.opaque-navbar').removeClass('opaque');
}
});
$('#myCarousel').carousel();
var winWidth = $(window).innerWidth();
$(window).resize(function () {
if ($(window).innerWidth() < winWidth) {
$('.carousel-inner>.item>img').css({
'min-width': winWidth, 'width': winWidth
});
}
else {
winWidth = $(window).innerWidth();
$('.carousel-inner>.item>img').css({
'min-width': '', 'width': ''
});
}
});
body {
background: #97744a;
}
section
{
background:yellow;
}
.banner
{
background: url(https://jonesbrotherscoffee.com/img/grindedcoffee300.jpg) fixed;
min-height:200px;
}
.banner .row
{
text-align:center;
margin-top:50px;
}
.banner h1
{
color:white;
}
.opaque-navbar {
background-color: rgba(0,0,0,0.5);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.opaque-navbar.opaque {
background-color: black;
height: 60px;
transition: background-color .5s ease 0s;
}
ul.dropdown-menu {
background-color: black;
}
#media (max-width: 992px) {
body
{
background: ;
}
.opaque-navbar {
background-color: black;
height: 60px;
transition: background-color .5s ease 0s;
}
}
.navbar-brand img {
width: 190px;
height: auto;
margin-top: -12px;
}
.active a {
background-color: #eeab1f !important;
}
/* main page */
.jumbotron {
border-top: 5px solid #cb8f50;
border-bottom: 5px solid #754b24;
border-right: 0px;
border-left: 0px;
min-height: 200px;
background-color: #422a1e;
}
.jumbotron img {
width: 500px;
height: auto;
margin: 0 auto;
display: block;
}
.jumbotron h2, h3 {
margin-top: -5px;
font-weight: bold;
color: #eeab1f;
}
.jumbotron p {
font-weight: lighter;
color: #ffffff;
font-size: 15px;
}
.jumbotron img {
width: 450px;
height: auto;
}
.right {
margin-top: 40px;
}
.right img{
width: 25px;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: 400px;
min-width: 100%;
width: 100%;
max-width: 100%;
line-height: 1;
margin: 0 auto;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Conlins Coffee World Inc.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery.min1.js"></script>
<script src="js/javascript-redirect.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
<span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/brands/artisans.png"></a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contact Us</li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="http://www.dogbehaviour.org.uk/wp-content/uploads/2016/06/EH-Dog-behaviour.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="http://www.oldnorthcanine.com/wp-content/uploads/2015/06/animal-dog-pet-sad-1920x500.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="http://0104.nccdn.net/1_5/07f/260/1be/sophiebig.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>

$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.opaque-navbar').addClass('opaque');
} else {
$('.opaque-navbar').removeClass('opaque');
}
});
$('#myCarousel').carousel();
var winWidth = $(window).innerWidth();
$(window).resize(function () {
if ($(window).innerWidth() < winWidth) {
$('.carousel-inner>.item>img').css({
'min-width': winWidth, 'width': winWidth
});
}
else {
winWidth = $(window).innerWidth();
$('.carousel-inner>.item>img').css({
'min-width': '', 'width': ''
});
}
});
body {
background: #97744a;
}
section
{
background:yellow;
}
.banner
{
background: url(https://jonesbrotherscoffee.com/img/grindedcoffee300.jpg) fixed;
min-height:200px;
}
.banner .row
{
text-align:center;
margin-top:50px;
}
.banner h1
{
color:white;
}
.opaque-navbar {
background-color: rgba(0,0,0,0.5);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.opaque-navbar.opaque {
background-color: black;
height: 60px;
transition: background-color .5s ease 0s;
}
ul.dropdown-menu {
background-color: black;
}
#media (max-width: 992px) {
body
{
background: ;
}
.opaque-navbar {
background-color: black;
height: 60px;
transition: background-color .5s ease 0s;
}
}
.navbar-brand img {
width: 190px;
height: auto;
margin-top: -12px;
}
.active a {
background-color: #eeab1f !important;
}
/* main page */
.jumbotron {
border-top: 5px solid #cb8f50;
border-bottom: 5px solid #754b24;
border-right: 0px;
border-left: 0px;
min-height: 200px;
background-color: #422a1e;
}
.jumbotron img {
width: 500px;
height: auto;
margin: 0 auto;
display: block;
}
.jumbotron h2, h3 {
margin-top: -5px;
font-weight: bold;
color: #eeab1f;
}
.jumbotron p {
font-weight: lighter;
color: #ffffff;
font-size: 15px;
}
.jumbotron img {
width: 450px;
height: auto;
}
.right img{
width: 25px;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: 400px;
min-width: 100%;
width: 100%;
max-width: 100%;
line-height: 1;
margin: 0 auto;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Conlins Coffee World Inc.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery.min1.js"></script>
<script src="js/javascript-redirect.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
<span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/brands/artisans.png"></a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contact Us</li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="http://www.dogbehaviour.org.uk/wp-content/uploads/2016/06/EH-Dog-behaviour.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="http://www.oldnorthcanine.com/wp-content/uploads/2015/06/animal-dog-pet-sad-1920x500.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="http://0104.nccdn.net/1_5/07f/260/1be/sophiebig.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>

Remove margin-top
.right {
margin-top: 0px;
}

How to assign fixed background-image with respect to a div?

I have used fixed background images in my carousel of website made with bootstrap. The background images are fixed to show the parallaxing effect. But the problem is the when new slides of carouslel move to left the image already present there remains fixed. What I want is that the background image on a div move when the div moves with css transition effects.
I want this type of carousel http://www.w3schools.com/bootstrap/bootstrap_carousel.asp In other words I want the next item to push the background image of active item to the left. At present when the next item slides to the left it opaques the current item's background image.
The code is as following:
var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
mylogo.innerHTML = "SSR";
}
function changelogo() {
return function() {
if (mq.matches) {
mylogo.innerHTML = "SSR";
} else {
mylogo.innerHTML = "Syco Scientist Records"
}
}
}
window.onresize = changelogo();
if (window.matchMedia("(max-height: 420px)").matches) {
for (var n = 0; n < 5; n++) {
document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
}
}
.navbar {
min-height: 60px;
border-color: #333;
background-color: #d6d5d5;
margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
height: 60px;
padding: 20px 15px;
color: #333;
font-family: Raleway;
font-weight: bold;
font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
margin-top: 14px;
border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
background-color: #333;
}
.navbar ul.navbar-nav {
margin-bottom: 0;
}
.navbar ul.nav > li > a {
height: 60px;
font-size: 14px;
line-height: 20px;
padding: 20px 15px;
color: #333;
text-align: center;
}
.navbar ul.nav > li > a:hover {
color: #333;
background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
background-color: #333;
color: #d6d5d5;
}
#home {
background-color: #333;
z-index: 6;
}
.carousel {
width: 100%;
height: 100vh;
min-height: 420px;
}
.mobile-carousel {
padding-top: 100px;
height: 100%;
padding-bottom: 40px;
}
.carousel-inner {
height: 100%;
}
.carousel-inner .item {
height: 100%;
-webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
display: block;
width: 100%;
height: 568px;
height: 100%;
}
.carousel-inner .first {
width: 100%;
margin: auto;
background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .second {
width: 100%;
margin: auto;
background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .third {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .fourth {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-control span {
left: 50%;
position: absolute;
top: 50%;
}
.carousel-control span img {
position: absolute;
top: -36px;
left: -9px;
}
.carousel-indicators {
bottom: 0px;
margin-bottom: 0;
}
.carousel-indicators li {
background-color: #777;
border: 0;
}
.carousel-indicators li.active {
background-color: #dcdbdb;
margin: 1px;
width: 10px;
height: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<div class="item active first"></div>
<div class="item second"></div>
<div class="item third"></div>
<div class="item fourth"></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><img src="images/left_Arrow.png"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><img src="images/right_arrow.png"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
How do I acheive this?
Edit: It seems like the problem is only in firefox browser. Please explain why it works in chrome browser and not in firefox browser.

I tried like this . carousel next item will appear on previous item after that the background image of active item to the left
var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
mylogo.innerHTML = "SSR";
}
function changelogo() {
return function() {
if (mq.matches) {
mylogo.innerHTML = "SSR";
} else {
mylogo.innerHTML = "Syco Scientist Records"
}
}
}
window.onresize = changelogo();
if (window.matchMedia("(max-height: 420px)").matches) {
for (var n = 0; n < 5; n++) {
document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
}
}
.navbar {
min-height: 60px;
border-color: #333;
background-color: #d6d5d5;
margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
height: 60px;
padding: 20px 15px;
color: #333;
font-family: Raleway;
font-weight: bold;
font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
margin-top: 14px;
border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
background-color: #333;
}
.navbar ul.navbar-nav {
margin-bottom: 0;
}
.navbar ul.nav > li > a {
height: 60px;
font-size: 14px;
line-height: 20px;
padding: 20px 15px;
color: #333;
text-align: center;
}
.navbar ul.nav > li > a:hover {
color: #333;
background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
background-color: #333;
color: #d6d5d5;
}
#home {
background-color: #333;
z-index: 6;
}
.carousel {
width: 100%;
height: 100vh;
min-height: 420px;
}
.mobile-carousel {
padding-top: 100px;
height: 100%;
padding-bottom: 40px;
}
.carousel-inner {
height: 100%;
}
.carousel-inner .item {
height: 100%;
-webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
display: block;
width: 100%;
height: 568px;
height: 100%;
}
.carousel-inner .first {
width: 100%;
margin: auto;
background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .second {
width: 100%;
margin: auto;
background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .third {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .fourth {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-control span {
left: 50%;
position: absolute;
top: 50%;
}
.carousel-control span img {
position: absolute;
top: -36px;
left: -9px;
}
.carousel-indicators {
bottom: 0px;
margin-bottom: 0;
}
.carousel-indicators li {
background-color: #777;
border: 0;
}
.carousel-indicators li.active {
background-color: #dcdbdb;
margin: 1px;
width: 10px;
height: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<div class="item active first"></div>
<div class="item second"></div>
<div class="item third"></div>
<div class="item fourth"></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><img src="images/left_Arrow.png"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><img src="images/right_arrow.png"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

You can just add this css :
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
div#mycarousel .carousel-inner .item{
padding:0 10%;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<div class="item active first"><img src="http://blog.allisonjoyce.com/wp-content/uploads/2014/02/ablog186.jpg"></div>
<div class="item second"><img src="https://i.ytimg.com/vi/MLqHuAXasTY/maxresdefault.jpg"></div>
<div class="item third"><img src="http://blog.allisonjoyce.com/wp-content/uploads/2014/02/ablog186.jpg"></div>
<div class="item fourth"><img src=""><img src="http://www.monopolycity.com/acimages/ac_beach_21_560.gif"></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><i class="glyphicon glyphicon-chevron-left"></i></span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><i class="glyphicon glyphicon-chevron-right"></i></span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>

But the problem is the when new slides of
carouslel move to left the image already present there remains fixed.
What I want is that the background image on a div move when the div
moves with css transition effects.
In Chrome - Your provided demo is already working as you want.
But in FireFox the issue is seen. The issue is because you are using fixed on the images which will keep it fixed, Removing this worked as required in Firefox too.
background: url(..) no-repeat fixed; // remove fixed
Edit 1: As you said removing fixed will break parallax effect you can do this way.
Add another div inside the .item div and add image to this div. So now we have a inner div with fixed image, But outer div is free to move.
Below is a working sample
var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
mylogo.innerHTML = "SSR";
}
function changelogo() {
return function() {
if (mq.matches) {
mylogo.innerHTML = "SSR";
} else {
mylogo.innerHTML = "Syco Scientist Records"
}
}
}
window.onresize = changelogo();
if (window.matchMedia("(max-height: 420px)").matches) {
for (var n = 0; n < 5; n++) {
document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
}
}
.navbar {
min-height: 60px;
border-color: #333;
background-color: #d6d5d5;
margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
height: 60px;
padding: 20px 15px;
color: #333;
font-family: Raleway;
font-weight: bold;
font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
margin-top: 14px;
border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
background-color: #333;
}
.navbar ul.navbar-nav {
margin-bottom: 0;
}
.navbar ul.nav > li > a {
height: 60px;
font-size: 14px;
line-height: 20px;
padding: 20px 15px;
color: #333;
text-align: center;
}
.navbar ul.nav > li > a:hover {
color: #333;
background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
background-color: #333;
color: #d6d5d5;
}
#home {
background-color: #333;
z-index: 6;
}
.carousel {
width: 100%;
height: 100vh;
min-height: 420px;
}
.mobile-carousel {
padding-top: 100px;
height: 100%;
padding-bottom: 40px;
}
.carousel-inner {
height: 100%;
}
.carousel-inner .item, .carousel-inner .item > div {
height: 100%;
-webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
display: block;
width: 100%;
height: 568px;
height: 100%;
}
.carousel-inner .first > div {
width: 100%;
margin: auto;
background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .second > div{
width: 100%;
margin: auto;
background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .third > div{
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .fourth > div{
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-control span {
left: 50%;
position: absolute;
top: 50%;
}
.carousel-control span img {
position: absolute;
top: -36px;
left: -9px;
}
.carousel-indicators {
bottom: 0px;
margin-bottom: 0;
}
.carousel-indicators li {
background-color: #777;
border: 0;
}
.carousel-indicators li.active {
background-color: #dcdbdb;
margin: 1px;
width: 10px;
height: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<div class="item active first"><div></div></div>
<div class="item second"><div></div></div>
<div class="item third"><div></div></div>
<div class="item fourth"><div></div></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><img src="images/left_Arrow.png"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><img src="images/right_arrow.png"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

background: url(../img/fav.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 500px;
Set the height to your image like heigth:500px; or you can use padding:50px 0; else it will not display your image on the background until you write anything on that particular div.

how to align an image at the bottom of a viewport div inside bootstrap carousel

i'm working on bootstrap 2.3.2 and i want to position an image at the bottom of a viewport div, but unable to do so.i want that the secondlayer image will remain at the bottom of viewport div in every device. How can i achieve this.
Here is my code for carousel:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="bgImage">
<img src="http://placehold.it/1280x600" alt="First slide">
</div>
<div class="header-text">
<div class="text-center">
<div class="row-fluid">
<div class="span6 offset3">
<div class="firstlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-text.png">
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="secondlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-bottomImage01.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Here is my CSS:
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner .item .bgImage img {
width: 100%;
min-height: 100vh;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.text-center {text-align:center;}
.firstlayer {margin-top:180px;}
.secondlayer {margin-top:175px;}

To get the secondlayer div positioned at the bottom of the viewport, it has to be positioned absolutely. See the revised code of your example:
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner .item .bgImage img {
width: 100%;
min-height: 100vh;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.text-center {text-align:center;}
.firstlayer {margin-top:180px;}
.secondlayer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.secondlayer img {
max-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="bgImage">
<img src="http://placehold.it/1280x600" alt="First slide">
</div>
<div class="header-text">
<div class="text-center">
<div class="row-fluid">
<div class="span6 offset3">
<div class="firstlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-text.png">
</div>
</div>
</div>
</div>
</div>
<div class="secondlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-bottomImage01.png">
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

Twitter-Bootstrap & IE grid system issues

I'm currently working on a new bootstrap markup for a website and it looks completely as wanted in the Google Chrome - but when I switch to IE11 it looks like the grid system is screwed.
I've specified viewport, IE=edge etc. and tried to include respond.js as various google searches suggested. The website looks fine with xs screen size but for bigger screen sizes the container overflows the window, thus not adapting to the size of the screen.
Can you help me out? The website is available at
thyrace.dk/etape and the markup right beneath.
Thank you very much.
#-ms-viewport { width: device-width; }
#viewport { width: device-width; }
html, body {
height: 100%;
}
body {
background-image: url("../img/bg.png");
background-repeat: repeat;
font-size: 13px;
}
.wrapper {
height: 100%;
display: table;
}
.navbar {
background-color: white;
}
.content {
background-color: white;
height: 100%;
padding: 20px;
}
main, aside {
margin-top: 10px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav li > a:hover {
color: #FFF;
background: grey;
}
aside {
padding: 0;
width: 100%;
}
aside img {
float: left;
margin: 0 0 5px 5px;
}
/* Carousel */
.carousel {
margin-bottom: 20px;
margin: 0 10px 0 10px;
}
.carousel .item {
height: 225px;
background-color: #555;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
}
.carousel-caption h4 {
margin: 0;
background-color: rgba(175, 0, 0, 0.50);
}
.carousel-indicators {
top: 10px;
height: 20px;
}
.carousel-text {
z-index: 1;
position: absolute;
bottom: 20px;
right: 0;
padding: 15px;
width: 400px;
max-width: 100%;
background-color: grey;
color: white;
}
.carousel-text h2 {
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 0;
}
.navbar-default .navbar-nav li {
margin-bottom: 1px;
}
#media (min-width: 768px) {
.wrapper {
padding: 20px 0 20px 0;
}
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar {
margin-right: 0;
margin-left: 0;
border-radius: 0px;
}
.navbar-nav, .navbar-nav > li, .navbar-left,
.navbar-right, .navbar-header {
float: none !important;
}
.navbar-right .dropdown-menu {
left: 0;
right: auto;
}
.navbar-logo {
padding: 0 10px 10px 10px;
}
.page-return {
width: 100%;
text-align: center;
margin-top: 5px;
font-size: 11px;
}
}
<!DOCTYPE HTML>
<html lang="da" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ThyRace.dk - Løb med naturoplevelser i Thy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/purple-color-scheme.css">
</head>
<body>
<div class="container wrapper">
<div class="col-xs-12 col-sm-3 col-md-2">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="hidden-xs page-return">
Tilbage til hovedoversigten
</div>
<img src="img/logo_etape.png" class="img-responsive navbar-logo hidden-xs" alt="" />
<a class="navbar-brand visible-xs" href="#">
Etapeløb Thy Trail
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="visible-xs">Tilbage til thyrace.dk</li>
<li class="active">Løbsinformation</li>
<li>Rute</li>
<li>Tilmelding</li>
<li>Startliste</li>
</ul>
</div>
</nav>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div class="navbar navbar-default content">
<div class="row">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/slider/1.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/2.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/3.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/4.jpg" alt="" />
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-text">
<h2>Fredag d. 30. oktober - Søndag 1. november 2015</h2>
</div>
</div> <!-- End carousel -->
</div> <!-- End carousel row -->
<div class="row">
<div class="col-xs-12 col-sm-9">
<main>
Bla bla bla
</main>
</div>
<div class="col-xs-12 col-sm-3">
<aside>
<img src="http://dummyimage.com/250x100/000/ffffff&text=250*100" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
</aside>
</div> <!-- End aside wrapper -->
</div> <!-- End main + aside row -->
</div> <!-- End navbar -->
</div> <!-- End content col -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Your DOM is not as per bootstrap you've to use something like that
<div class="wrapper">
<div class="container">
<div class="row>
<div class="col-xs-12 col-sm-3 col-md-2">
And You've used display:table for your wrapper viz causing the layout issue for IE as well as in FF
Also for better results stop using your custom class along with bootstrap class otherwise it will misbehave at some points.
For e.g:
Instead of using:
<div class="col-md-6 yourClass">
you should use:
<div class="col-md-6">
<div class="yourClass">

Bootstrap Column nesting not working. 1 Div spanning 2 rows to the left 2 stacked to the right

I have been messing around with this for a couple days and cannot get this section to work. I want one large div element to span two rows on the left and have two stacked div elements on the right.
Here is the code.
<!DOCTYPE html>
<html>
<head>
<title>Athenz -- DJ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="_/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="_/css/mystyles.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- NAVIGATION MENU BAR -->
<div class="jumbtron">
<section class="navbar navbar-fixed-top center" role="navigation">
<ul id="top-nav" class="nav navbar-nav">
<li>Home</li>
<li>Model</li>
<li>Actress</li>
<li>DJ</li>
<li>Entreprenuer</li>
<li>Press</li>
<li>Contact</li>
</ul><!-- nav -->
</section><!-- navbar -->
<div id="djbanner" class="col-lg-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src='images/dj/dj1.jpg' alt="DJ Photo 1">
</div>
<div class="item">
<img src='images/dj/dj2.jpg' alt="DJ Photo 2">
</div>
<div class="item">
<img src='images/dj/dj3.jpg' alt="DJ Photo 3">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
<div id="dj-body" class="container">
<div class="row">
<div class="col-lg-6">
<div class="big-box">image</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6"><div class="mini-box">1</div></div>
<div class="col-lg-6"><div class="mini-box">2</div></div>
<div class="col-lg-6"><div class="mini-box">3</div></div>
<div class="col-lg-6"><div class="mini-box">4</div></div>
</div>
</div>
</div>
</div> <!-- container -->
<section class="navbar navbar-fixed-bottom" role="navigation">
<div class="container">
<ul id="bottom-nav" class="nav navbar-nav">
<li>Energy Wellness</li>
<li>Bookings</li>
<li><img src="images/social/facebook.png" /></li>
<li><img src="images/social/twitter.png" /></li>
<li><img src="images/social/youtube.png" /></li>
<li><img src="images/social/soundcloud.png" /></li>
</ul><!-- nav -->
</div>
</section><!-- navbar -->
<script>
$('.carousel').carousel({
interval: 4000
})
</script>
<script src="_/js/bootstrap.js"></script>
<script src="_/js/myscript.js"></script>
</body>
</html>
Thats the main page. Here is the CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* ------------ Navigation Bar Section ------------ */
.navbar.center {
text-align: center;
margin: 0 auto;
}
.navbar {
background-color: rgba(0,0,0,0.5);
background: rgba(0,0,0,0.5);
border-color: rgba(0,0,0,0.5);
}
.navbar-nav li a {
color: white;
}
ul#top-nav.nav.navbar-nav li a {
font-family: 'Raleway', sans-serif;
margin-right: 50px;
}
ul#top-nav.nav.navbar-nav {
float: none;
display: inline-block;
}
/* ----------- Home Page Section -------------*/
.quarter {
width: 50%;
height: 99.9%;
float: left;
}
.contents {
height: 50%;
width: 100%;
}
#athenz-logo {
z-index: 1050;
position: absolute;
background-image: url('../../images/logo/athenz-logo.png');
background-size: cover;
background-color: white;
top: 50%;
left: 50%;
width: 360px;
height: 225px;
margin-left: -180px;
margin-top: -112.5px;
border-left: 4px solid #468AD4;
border-top: 4px solid #468AD4;
}
#athenz-logo::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 49.5%;
border-bottom: 4px solid #468AD4;
}
#athenz-logo::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 49%;
width: 4px;
border-right: 4px solid #468AD4;
}
#home-top-left {
background-image: url('../../images/home/home_tl.jpg');
background-size: cover;
position: relative;
border-bottom: 2px solid;
border-bottom-color: #468AD4;
border-right: 2px solid;
border-right-color: #468AD4;
}
#home-top-right {
background-image: url('../../images/home/home_tr.jpg');
background-size: cover;
position: relative;
border-bottom: 4px solid;
border-bottom-color: #468AD4;
border-left: 2px solid;
border-left-color: #468AD4;
}
#home-bottom-left {
background-image: url('../../images/home/home_bl.jpg');
background-size: cover;
position: relative;
overflow: hidden;
border-top: 2px solid;
border-top-color: #468AD4;
border-right: 4px solid;
border-right-color: #468AD4;
}
#home-bottom-right {
z-index: 1051;
padding: 75px;
position: relative;
overflow: hidden;
}
/* ------------- DJ STYLING STARTS ------------- */
div#carousel-example-generic.carousel.slide {
height: 100%;
}
div#carousel-example-generic.carousel.slide div.carousel-inner div.item img {
width: 100%;
}
.big-box,
.mini-box {
background-color: #10BCFF;
color: white;
text-align: center;
margin: 2px;
font-size: 1.5em;
}
.big-box {
height: 120px;
}
.mini-box {
height: 60px;
}
/* --------- Footer Section -------- */
ul#bottom-nav.nav.navbar-nav {
float: right;
}
ul#bottom-nav.nav.navbar-nav li {
margin: 0;
}
section.navbar.navbar-fixed-bottom div.container {
margin-right: 0;
}
section.navbar.navbar-fixed-bottom {
height: 50px;
z-index: 1060;
}
ul#bottom-nav.nav.navbar-nav li {
margin: 0;
text-align: center;
font-size: 12px;
right: 0;
padding: 0;
}
ul#bottom-nav.nav.navbar-nav li a img {
width: 28px;
}
I am Pretty sure I closed everything but I cannot get it to work on my computer. Tried display, position and several other options but nothing seemed to work. Thanks for you help in advanced.

<div class="row">
<div class="col-md-6">Tall</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">Top</div>
</div>
<div class="row">
<div class="col-md-12">Bottom</div>
</div>
</div>
</div>