Carousel overlaying background image - html

Question

Soo... if anyone has a few minutes to spare and can take a look at my code and help me out here... I have a problem that I can't solve and have been busting my head for hours now...
So I'm making a page for a local intermunicipal Football Association using Bootstrap and I'm trying to achieve this: the carousel overlaying the background image, dont mind the blue and yellow thing...
and this is what I get:
Here is my code:
HTML:
<!--Background image-->
<div class="bg">
<img src="img/football-field.jpg" class="img-responsive" alt="ozadje">
</div>
<!--Main content of page-->
<section id="main-content">
<div class="container">
<div class="col-md-2 col-sm-2 navigation">
content content
content content
content content
content content
content content
content content
</div>
<!--Beginning of carousel-->
<div class="col-md-10 col-md-10 galery">
<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">
<div class="item active">
<img src="img/example.jpg" alt="desc">
</div>
<div class="item">
<img src="img/example.jpg" alt="desc">
</div>
<div class="item">
<img src="img/example.jpg" alt="desc">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
and my CSS:
.bg{
height: 420px;
z-index: -999;
}
#main-content{
z-index: 100;
background-color: white;
}
I'd realy apreciate some help :)
P.S. I hope you understand what I mean and am trying to acomplish... English is not my native language so there may be some poor choice of words and bad exlenation and a lot of typos :)

Answer 1

Using z-index only to display your content over your background image won't work.
In fact, z-index only works on an element with an absolute or fixed position.
The most easy and i believe most clean way to achieve what you want is to put your image as your page's background (with the css 'background' proprety).
#main-content{
background-image: url('img/football-field.jpg');
background-color: white;
}
An other way would be to make your section overlap the backgroung div.
#main-content{
position: absolute;
top: 0;
left: 0;
background: none;
}

Answer 2

You can set position value to your element so that the z-index works. It's either you use position fixed, absolute, or relative. Note that they are not the same and you need to add some css to it. Please see explanation here .
Sample:
header {
height: 100px;
position: relative;
}
header img {
width: 100%;
height: 100%;
}
.start {
position: absolute;
z-index: 100;
top: 0;
}
.navigation {
background: #F7F7F7;
}
#main-content{
position: relative;
background-color: white;
margin-top:-1.5em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</nav>
<!--Main content of page-->
<section id="main-content">
<header>
<img src="https://image.shutterstock.com/z/stock-photo-american-football-players-in-the-action-grand-arena-345202907.jpg" alt="ozadje">
</header>
<div class="container start">
<div class="col-md-2 col-xs-2 navigation">
content content
content content
content content
content content
content content
content content
</div>
<!--Beginning of carousel-->
<div class="col-md-10 col-xs-10 galery">
<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">
<div class="item active">
<img src="http://via.placeholder.com/950x250" alt="desc">
</div>
<div class="item">
<img src="http://via.placeholder.com/950x250" alt="desc">
</div>
<div class="item">
<img src="http://via.placeholder.com/950x250" alt="desc">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>

Answer 3

It does not look very nice if you run it, but you can maybe get an idea from this code. Instead of using a div and insert an image (which pushes your div down) you could set a background image in css:
#main-content{
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Football_iu_1996.jpg/1200px-Football_iu_1996.jpg");
background-color: white;
}
.item img {
min-width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--Main content of page-->
<section id="main-content">
<div class="container">
<div class="col-md-2 col-sm-2 navigation">
content content
content content
content content
content content
content content
content content
</div>
<!--Beginning of carousel-->
<div class="col-md-10 col-md-10 galery">
<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">
<div class="item active">
<img src="http://lorempixel.com/400/200/sports/" alt="desc">
</div>
<div class="item">
<img src="http://lorempixel.com/400/200/sports/" alt="desc">
</div>
<div class="item">
<img src="http://lorempixel.com/400/200/sports/" alt="desc">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
It is probably not exactly as you want it but it may be helps you to get on track.
Hope it helps a bit.