HTML Background Positioning - html

Question

I've been trying to determine how to do a background like having a negative margin. Here is a picture of what I have done as of now
The picture below show what I want as a result
Im trying to use a negative margin but no luck at all. Here is my code as of now
HTML
<div class="container">
<div class="navbar navbar-custom radius-fixer nomargin" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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>
<div class="navbar-collapse collapse nopaddingright">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT US</li>
<li>FAQ</li>
<li>CONTACT US</li>
<li>ONLINE FORMS</li>
<li>VIRTUAL CLINIC TOUR</li>
<li>BLOG</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
<div class="clearfix" id="main">
<div class="container">
<div class="flexslider nomargin">
<ul class="slides">
<li>
<img src="SLIDER1" />
</li>
<li>
<img src="SLIDER2" />
</li>
<li>
<img src="SLIDER3" />
</li>
</ul>
</div>
</div>
</div>
FOR MY CSS
#main{
background: #bf35bc;
background-position: top;
}
A reply is really appreciated.

Answer 1

You should be able to achieve what you want by applying a negative top margin to the main element:
margin-top: -40px;
That will pull the div up. See http://jsfiddle.net/raad/f6r1Lvf9/embedded/result/
EDIT
I have forked the Bootply example from the question, and added a negative top margin: http://www.bootply.com/5n8DsKXPQG
It appears to do what is needed.

Answer 2

this is negative top margin: margin-top: -50px;
so try
#main{
background: #bf35bc;
background-position: top;
margin-top: -50px;
}